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

最新推荐文章于 2024-08-09 07:31:42 发布

cccc☜

最新推荐文章于 2024-08-09 07:31:42 发布

阅读量824

点赞数 6

分类专栏： AntV L7 文章标签：前端

本文链接：https://blog.csdn.net/weixin_46561899/article/details/135507014

版权

AntV L7 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在项目中引入AntVL7地图库，安装依赖，以及如何使用四川地图数据，包括下载JSON数据和创建PolygonLayer和LineLayer以实现3D效果。

摘要由CSDN通过智能技术生成

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

项目引入`AntV L7`

官网地址：https://l7.antv.antgroup.com/tutorial/l7

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

项目中使用

代码中的四川地图数据

下载网址：https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

json数据：https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json

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();
});