antV/L7@2.2.19-」世界地图+散点图

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