之前更新过@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",即可获取本文章的源码