项目中使用AntV L7地图（五）添加飞线

🕗 发布于 2024-12-11 00:25 antvL7

项目中使用`AntV L7`地图，添加飞线

文档地址：https://l7.antv.antgroup.com/zh/examples/line/animate/#trip_animate

一、初始化地图

使用的地图文件为四川地图JSON，下载地址:https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

import { ref, onMounted } from "vue";
import { Scene } from "@antv/l7";
import { Map } from "@antv/l7-maps";


const scene: any = ref(null); //地图实例

function initMap() {
  scene = new Scene({
    id: "map",
    logoVisible: false, //logo 是否可见
    map: new Map({
      center: [104.065735, 30.659462], //中心点
      zoom: 5.4, //初始化缩放等级
      interact: false, // 高德地图是否允许地图可拖动，默认为true
      pitch: 30,
    }),
  });
  scene.setMapStatus({
    dragEnable: false, //是否允许地图拖拽
    keyboardEnable: false, // 是否允许形键盘事件
    doubleClickZoom: false, // 双击放大
    zoomEnable: false, // 滚动缩放
    rotateEnable: false, // 旋转
  });
  scene.on("loaded", () => {
    addPolygonLayer();
    addLineLayer()
  });
}

onMounted(() => {
  initMap();
});

二、添加地图面图层

import sichuanJson from "@/assets/json/sichuan.json";
import sichuanAreaJson from "@/assets/json/scArea.json"; //将地图下载存放在本地文件中，并引入

function addPolygonLayer() {
  //边线
  const sichuanLineShapeMap = new LineLayer({ zIndex: 10 })
    .source(sichuanJson)
    .shape("line")
    .size(0)
    .color("rgb(175, 222, 255)")
    .style({
      // raisingHeight: 200000,
    });
  const sichuanLineMap = new LineLayer({ zIndex: 10 })
    .source(sichuanAreaJson)
    .shape("wall")
    .size(150000)
    .style({
      heightfixed: true,
      opacity: 0.6,
      sourceColor: "rgba(0,0, 0,.5)",
      targetColor: "rgb(175, 222, 255)",
    });
  let polygonLayer = new PolygonLayer() //{ autoFit: true }
    .source(sichuanAreaJson)
    .size(150000)
    .shape("extrude")
    .color("rgba(0,0, 0,.5)")
    .active({
      color: "rgb(100,230,255)",
    })
    .style({
      //  mapTexture: mapBg,
      heightfixed: true,
      pickLight: true,
      raisingHeight: 10000,
      opacity: 0.8,
    });

  const texts: any = [];
  sichuanAreaJson.features.map((option: any) => {
    const { name, center } = option.properties;
    const [lng, lat] = center;
    texts.push({ name, lng, lat });
    return "";
  });

  const scPointLayer = new PointLayer({ zIndex: 10 })
    .source(texts, {
      parser: {
        type: "json",
        x: "lng",
        y: "lat",
      },
    })
    .shape("name", "text")
    .size(10)
    .color("#fff")
    .style({
      textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
      spacing: 2, // 字符间距
      padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
      stroke: "#fff", // 描边颜色
      strokeWidth: 0.3, // 描边宽度
      textAllowOverlap: true,
      raisingHeight: 10000,
    });
  scene.addLayer(polygonLayer);
  scene.addLayer(sichuanLineShapeMap);
  scene.addLayer(scPointLayer);
  scene.addLayer(sichuanLineMap);
}

三、添加地图飞线

1、引入需要渲染飞线的数据

//数据格式如下：
[
{ 
    "startLongitude":"104.080989",
    "startLatitude":"30.657689",
    "endLongitude":"101.964057",
    "endLatitude":"30.050738"
    }
]

2、

import flyData from "@/assets/json/flyData.json"
function addLineLayer(){
  const layer = new LineLayer({
        blend: 'normal',
      })
        .source(flyData, {
          parser: {
            type: 'json',
            x: 'startLongitude',
            y: 'startLatitude',
            x1: 'endLongitude',
            y1: 'endLatitude',
          },
        })
        .size(2)
        .shape('arc3d')
        .color('#fff')
        .animate({
          interval:0.5,
          trailLength: 1,
          duration: 3,
        })
        .style({
          opacity:1,
          raisingHeight: 10000,
        });
        
      scene.addLayer(layer);
}

function addChinaLineLayer() {
  moveLineLayer.value = new LineLayer({
    blend: "normal",
  })
    .source(dailyFlyData, {
      parser: {
        type: "json",
        x: "startLongitude",
        y: "startLatitude",
        x1: "endLongitude",
        y1: "endLatitude",
      },
    })
    .size(3)
    .shape("arc3d")
    .color("rgb(249, 252, 22)")
    .animate({
      interval: 0.5,
      trailLength: 1,
      duration: 3,
    })
    .style({
      opacity: 1,
      raisingHeight: 10000,
    });

  movePointLineLayer.value = new PointLayer({
    autoFit: false,
    zIndex:10
  })
    .source(dailyFlyData, {
      parser: {
        type: "json",
        x: "endLongitude",
        y: "endLatitude",
      },
    })
    .shape("name", "text")
    .size(14)
    .active(true)
    .color("#18ecef")
    .style({
      raisingHeight: 35000,
    });

  scene.value.addLayer(moveLineLayer.value);
  scene.value.addLayer(movePointLineLayer.value);
}

四、完整代码如下

<script lang="ts" setup>
import { onMounted } from "vue";
import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7";
import { Map } from "@antv/l7-maps";
import sichuanJson from "@/assets/json/sichuan.json";
import sichuanAreaJson from "@/assets/json/scArea.json";
// import mapBg from "@/assets/images/screen/home/bg_screen.png"
import flyData from "@/assets/json/flyData.json"

let scene: Scene; //地图实例

//初始化地图
function initMap() {
  scene = new Scene({
    id: "map",
    logoVisible: false, //logo 是否可见
    map: new Map({
      center: [104.065735, 30.659462], //中心点
      zoom: 5.4, //初始化缩放等级
      interact: false, // 高德地图是否允许地图可拖动，默认为true
      pitch: 30,
    }),
  });
  scene.setMapStatus({
    dragEnable: false, //是否允许地图拖拽
    keyboardEnable: false, // 是否允许形键盘事件
    doubleClickZoom: false, // 双击放大
    zoomEnable: false, // 滚动缩放
    rotateEnable: false, // 旋转
  });
  scene.on("loaded", () => {
    addPolygonLayer();
    addLineLayer()
  });
}

function addPolygonLayer() {
  //边线
  const sichuanLineShapeMap = new LineLayer({ zIndex: 10 })
    .source(sichuanJson)
    .shape("line")
    .size(0)
    .color("rgb(175, 222, 255)")
    .style({
      // raisingHeight: 200000,
    });
  const sichuanLineMap = new LineLayer({ zIndex: 10 })
    .source(sichuanAreaJson)
    .shape("wall")
    .size(150000)
    .style({
      heightfixed: true,
      opacity: 0.6,
      sourceColor: "rgba(0,0, 0,.5)",
      targetColor: "rgb(175, 222, 255)",
    });
  let polygonLayer = new PolygonLayer() //{ autoFit: true }
    .source(sichuanAreaJson)
    .size(150000)
    .shape("extrude")
    .color("rgba(0,0, 0,.5)")
    .active({
      color: "rgb(100,230,255)",
    })
    .style({
      //  mapTexture: mapBg,
      heightfixed: true,
      pickLight: true,
      raisingHeight: 10000,
      opacity: 0.8,
    });

  const texts: any = [];
  sichuanAreaJson.features.map((option: any) => {
    const { name, center } = option.properties;
    const [lng, lat] = center;
    texts.push({ name, lng, lat });
    return "";
  });

  const scPointLayer = new PointLayer({ zIndex: 10 })
    .source(texts, {
      parser: {
        type: "json",
        x: "lng",
        y: "lat",
      },
    })
    .shape("name", "text")
    .size(10)
    .color("#fff")
    .style({
      textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
      spacing: 2, // 字符间距
      padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
      stroke: "#fff", // 描边颜色
      strokeWidth: 0.3, // 描边宽度
      textAllowOverlap: true,
      raisingHeight: 10000,
    });
  scene.addLayer(polygonLayer);
  scene.addLayer(sichuanLineShapeMap);
  scene.addLayer(scPointLayer);
  scene.addLayer(sichuanLineMap);
}

function addLineLayer(){

  const layer = new LineLayer({
        blend: 'normal',
      })
        .source(flyData, {
          parser: {
            type: 'json',
            x: 'startLongitude',
            y: 'startLatitude',
            x1: 'endLongitude',
            y1: 'endLatitude',
          },
        })
        .size(2)
        .shape('arc3d')
        .color('#fff')
        .animate({
          interval:0.5,
          trailLength: 1,
          duration: 3,
        })
        .style({
          opacity:1,
          raisingHeight: 10000,
        });
        
      scene.addLayer(layer);
}

onMounted(() => {
  initMap();
});
</script>

<template>
  <div class="map-content">
    <div id="map"></div>
  </div>
</template>

<style lang="scss" scoped>
.map-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  overflow-y: hidden;

  #map {
    width: 100%;
    height: 100%;
  }
}


</style>

五、效果图

在这里插入图片描述

原文地址：https://blog.csdn.net/weixin_46561899/article/details/144353339

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：机器学习中的图匹配问题—基础学习
下一篇：React 中为什么不直接使用 requestIdleCallback?

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14

项目中使用AntV L7地图（五）添加飞线

项目中使用AntV L7地图，添加 飞线

一、初始化地图

二、添加地图面图层

三、添加地图飞线

四、完整代码如下

五、效果图

相关文章

项目中使用`AntV L7`地图，添加飞线