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

news2025/5/14 8:30:10

项目中使用`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>