Antv L7地图(一）

项目中使用AntV L7地图（一）

项目引入AntV L7

• 文档地址：l7.antv.antgroup.com/tutorial/l7

// 安装L7 依赖
npm install --save @antv/l7
// 安装第三方底图依赖
npm install --save @antv/l7-maps

项目中使用

代码中的四川地图数据

下载网址：datav.aliyun.com/portal/scho…

json数据：geo.datav.aliyun.com/areas_v3/bo…

import { Scene,PolygonLayer,LineLayer} from "@antv/l7";
import { Map } from "@antv/l7-maps";
import mapBgImg from "@/assets/screenImg/mapImg.png";//地图纹理
import sichuan from "@/assets/json/sichuan.json";//四川地图数据
let scene: any = null;
//初始化地图
async function initMap() {
  scene = new Scene({
    id: "map",
    logoVisible: false, //logo 是否可见
    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() {
   //PolygonLayer 添加面图层
  const sichuanMap = new PolygonLayer()
    .source(sichuan) 
    .shape("extrude") //shape 为extrude几何图层用于绘制3D的几何体
    .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,
    });
 //PolygonLayer 添加线图层
  const sichuanLine = new LineLayer({ 
      zIndex: 2  })
  //zIndex图层绘制顺序，
    .source(sichuan)
    .color("#fff")
    .size(1)
    .style({
      raisingHeight: 300000,
    });
    
  //把图层添加到 Scene 场景中
  scene.addLayer(sichuanLine);
  scene.addLayer(sichuanMap);
}
onMounted(() => {
  initMap();
});

效果