之前更新过@antv/L7->1.3.20版本-》北京地图+散点图,链接可点,源码也放在了公众号里,这一篇@antv/L7->2.2.19版本的源码也会放在公众号里,可在最后提取。以下是正文:
首先,安装antv/L7和antv/L7-maps,本项目用的是高德地图,目前antv/L7支持高德地图和Mapbox地图
npm install --save @antv/l7 npm install --save @antv/l7-maps接下来我会对我写的这两个antv/L7项目不同的版本做一个比较。antv/L7@2.0版本引入和1.0也有一些不同(是我本人写代码的差别比较,我给单拎出来了,1.0版本没有尝试用scene.addLayer(),也没有细究是否有这个方法,应该是有的吧,暂时1.0版本还在维护,大家有兴趣一探究竟,可以看这里-》https://l7.antv.vision/zh/docs/api/l7)。
1.0版本: antv/L7@1.0.vue import echarts from "echarts"; import L7 from "@antv/l7"; data(){ return{ scene: {}, // 场景化 popup: {} // 图例 } }, methods:{ mapNew() { let _this = this; this.popup = new L7.Popup(); this.scene = new L7.Scene({ id: "map", mapStyle: "dark", center: [116.397451, 40.2], pitch: 0, zoom: 1 }); this.scene.on("loaded", function() { _this.scene.LineLayer({}).source(data) //区域边界线图层 _this.scene.PolygonLayer({}).source(data) // 区域填充图层 _this.scene.PointLayer({}).source(data) //散点数据 }) let layer = _this.layer(_this.地图json数据包); } // 简略摘取,具体代码可关注公众号“DataShow Charts”,回复“antV1.0”可获取1.3.20版本的地图源码 2.0版本: antv/L7@2.2.19.vue import { Scene, PolygonLayer, LineLayer, PointLayer } from "@antv/l7"; //需要那些组建就引入哪些组件 import { GaodeMap } from "@antv/l7-maps"; methods: { worldMapFun() { let _this = this; const scene = new Scene({ id: "map", map: new GaodeMap({ // center: [110.19382669582967, 50.258134], pitch: 0, style: "blank", zoom: 1 }) // logoVisible: false //是否显示antV的logo }); scene.on("loaded", () => { const polygonLayer = new PolygonLayer().source(data) // 面图层 const lineLayer = new LineLayer().source(data) // 线图层 const pointLayer = new PointLayer({ zIndex: 2 }) .source(_this.pointdata, { parser: { type: "json", coordinates: "age" // 对应的数据参数名称;eg:{name:"测试",age:18,sex:"男"} } }) // 点数据 }) scene.addLayer(polygonLayer); scene.addLayer(lineLayer); scene.addLayer(pointLayer); } }值得说一下,之前1.3.20版本的时候我是引入的北京地图json包,这次的2.2.19版本是引入了高德地图
import { GaodeMap } from "@antv/l7-maps";关注公众号"DataShowCharts",回复关键词"antV2.0",即可获取本文章的源码