项目中使用`AntV L7`地图（三）----地图添加边框线

项目中使用AntV L7地图（三）----地图添加边框线

之前使用的JSON 数据是四川省地图数据，添加LineLayer后,地图内部也有边框线,现在想只给整个地图添加边框线

1、准备JSON数据

• 下载比现有地图更大一级的地图数据，比如四川省，就下载中国地图，然后将四川省的数粘贴出来，放在单独的json文件中

2、引入并使用LineLayer

import {Scene,PolygonLayer，LineLayer} from "@antv/l7";
import scCityCenter from "@/assets/json/sichuan-center.json";//地图数
import scLine from "@/assets/json/sichuan-line.json";//地图边框数据
async function initMap() {
  scene = new Scene({
    id: "map",
    logoVisible: false,
    map: new Map({
      center: [104.065735, 30.659462],
      zoom: 6,
      maxZoom: 8,
      minZoom: 4,
      pitch: 10, // 地图倾斜度
      style: "blank",
      interact: false, // 高德地图是否允许地图可拖动，默认为true
    }),
  });
  scene.on("loaded", () => {
    addPolygonLayer();
  });
}
function addPolygonLayer() {
  const sichuanMap = new PolygonLayer()
    .source(sichuan) //使用的数据为下载到本地的json数据
    .shape("extrude") //用于绘制几何体
    .size(100000)
    .active({
      color: "rgba(0, 0, 0, .3)",
    })
    .style({
      mapTexture: mapBgImg, //如果想使用纹理贴图，shap必须为extrude
      heightfixed: true, //抬升高度是否随 zoom 变化
      raisingHeight: 100000, //抬升高度
      sourceColor: "#333", //抬高高度的颜色
      targetColor: "#fff",
      opacity: 0.8,
    });

    //将地图内部的地市边界线设置透明度 opacity: 0.2
  const sichuanLine = new LineLayer({ zIndex: 2 })
    .source(sichuan)
    .color("#fff")
    .size(1)
    .style({
      opacity: 0.2,
      raisingHeight: 300000,
    });

    //地图添加边框
  const sichuanLine2 = new LineLayer({
    zIndex: 2,
  })
    .source(scLine)//此处使用的数据为
    .size(1)
    .shape("line")
    .texture("arrow")
    .color("#fff")
    .style({
      opacity: 1,
      lineTexture: true, // 开启线的贴图功能
      iconStep: 10, // 设置贴图纹理的间距
      raisingHeight: 300000,
    });
  scene.addLayer(sichuanLine2);
  scene.addLayer(sichuanLine);
  scene.addLayer(sichuanMap);
}

3、效果图

4、给边框线添加动画

const sichuanLine2 = new LineLayer({
    zIndex: 2,
  })
    .source(scLine)
    .size(1)
    .shape("line")
    .texture("arrow")
    .color("#fff")
    .animate({
      interval: 1, // 间隔
      duration: 0, // 持续时间，延时
      trailLength: 2 // 流线长度
    })
    .style({
      opacity: 1,
      lineTexture: true, // 开启线的贴图功能
      iconStep: 10, // 设置贴图纹理的间距
      raisingHeight: 300000,
    });
  scene.addLayer(sichuanLine2);