antV/L7@1.3.20-」实现北京地图+散点图

        现在是2020年07月04日  17：57，刚整理好了antV/L7@2.2.19版本的世界地图+散点图，有兴趣可移步链接，文章最后同样有源码获取方式。加油呀~

        --------------------------------------分界线-------------------------------------------------------

        现在是2020年04月28日 23:45分,背景音乐是隔壁老樊的"这一生关于你的风景".

        我开始对本篇文章做补充,今天应评论要求,我把antV/L7整理了一下源码,还是会发布在公众号上,文章末尾关注公众号"DataShowCharts",回复"antV地图"即可获取(我还附赠了echarts的堆叠折线图-自动轮播图例效果呢-.-)

        现在是我自己的絮絮叨叨时间:不想看的可以直接文末见啦~

        今天下午下班后,准备开始整理antV/L7的地图的代码,本来是直接运行项目的,可以运行起来,然后拷贝一份,准备修改.npm  install突然给了我一个大惊喜,出错了,地图渲染不出来,我赶紧查看文档,现在的已经更新到了2.2.2版本,而我之前用的是1.3.20版本,一些属性配置项都变了,一点一点根据文档磨以前的代码是真的有点痛苦,忍不住吐槽,哎,还是得干,不然以后项目更新了怎么办.虽然截止到现在我还没磨出来.....

      已经很晚了,还想洗澡睡觉,我今天还特勤快的洗了床单被罩,哎,还得铺床....吐槽无力,有需要的去公众号获取吧.文章末尾见啦~

-------------------------------------------------我是分界线-----------------------------------------------

      关于antV/L7除了官方文档，可翻阅的资料实在有限，关于地图的实现上，我真的是无力吐槽我自己……其实官方文档给的也还不错，emmm……深深的感受到作为一名开发者的自主学习能力有多么重要。额~对了，在本次的大屏开发上，尤其是图表渲染和地图，森森的感受到了自己的浅薄无知，每天都在“我没文化”、“我文盲”、“我看不懂”、“我不会”中怀疑自己，是英文的文档，考我英语阅读理解也就算了，竟然还有地理知识，好，毕竟是地图嘛~我忍了~可你还有高数计算是怎么个回事……忍不住想哭，要深深的虐一遍自己的脑子……好，我学！重新再来一遍高数！！！已经列入了日程……

    其他的也不多说了，关于这次的地图实现主要是用的@antV/L7@1.3.20，没办法，它最新的1.4版本还有bug……

   

 npm install @antV/l7@1.3.20

   接着就可以在需要的页面中引入了，

import L7 from "@antv/l7";
import { isDuration } from "moment";

地图的实现主要是用到了scene属性，Scene是基础的地图类，提供地图/图层的创建/管理等。这个是关于Scene的简介

const scene =new L7.Scene({
    id:'map'
    mapStyle:'dark',
    center:[ 110.770672, 34.159869 ],
    pitch:45
})

接下来我说一下这个地图的功能，可以实现交互，即，鼠标滚动的缩放，点击事件等，由于我需要出现散点，这个时候就用到了antV/l7---》layer-->PointLayer.

当地图缩放到某一个地图层级范围的时候，我需要显示整合一部分点数据，当再缩小范围的时候，我将把这些点合成一个点。其中判断地图层级，用到了

scene.getZoom()

scene.getZoom()>8.5  -->点数据

6.5<scene.getZoom()<8.5  --》区域点数据

scene.getZoom()<8.5  --》整点数据

我使用了一个笨方法，就是每一次判断完了之后，就重新加载地图进行渲染，这样做虽然实现了功能，但是在前端消耗有点大。之后我在gitLab上提交了代码，我们的项目主管-》刘又把这段代码（就是我重新加载渲染的部分）做了调整，代码简洁了很多，而且他没有用我写的这个方法，而是充分运用了文档提供的render。由此深深感受自己的马虎和对文档不够彻底理解的能力，实在有愧。

所以我会用两种方法说一下地图的实现，首先是我的笨方法，然后才是优化后的。

笨方法思路：

通过var scene = new L7.Scene({})加载完地图后，触发loaded事件

scene.on('loaded',()=>{})  //地图加载完成触发

在loaded写事件函数，关于Scene的地图时间或者鼠标事件等，都需要写在loaded里，写在外部是不生效的。在loaded里，new PointLayer，并且把三个判断写在这里，然后这样在每一次地图等级改变的时候，会重新加载地图，造成大量的渲染浪费。

本来想把自己原本的代码拿出来，做一次记录，但想想，也就算了吧，还是直接放优化后的吧。

优化后，把scene作为一个对象，在data里生命，并在methods--》mapNew函数里new且引用。

先说一个概念，scene在new之后是一个对象，啊么就可以对这个对象添加各种属性，包括渲染散点数据以及重新渲染散点数据，鼠标滑过后出现该散点的图例信息。LineLayer是用来勾勒北京地图的边界线，antV/l7中的每个地图的边境线是用的geojson数据格式，这个案例中的北京地图是我们主管找的，然而我现在还不知道在哪里找，下周我会问一下，再来更新。

这里是把这个地图当成组件，在vue中引用，应该在react中同样适用，暂时还没尝试，仅仅是猜测，这里先放部分代码，文章末尾会把代码的下载地址放上。这部分代码好好理解下，也可以不用下载压缩包的。

 var layer = _this.layer(_this.BJMapData);

//只需要传入data数据，就可以渲染散点，这里是把layer封装了一下
layer(dataObj) {
      var layer = this.scene
        .PointLayer({
          zIndex: 2
        })
        .source(dataObj, {
          parser: {
            type: "json",
            x: "longitude",
            y: "latitude"
          }
        })
        .shape("circle")
        .size(15)
        .active(false)
        .color("rgba(0,231,255,0.5)")
        .style({
          stroke: "#27F5FF",
          strokeWidth: 2,
          opacity: 1.0
        })
        .render();
      return layer;
    },

还有其他的，好吧，我有点懒了，如果有需要大家可以自行下载代码。

--------我是文章末尾-----

关注公众号"DataShowCharts",回复关键词"antV1.0",即可获取本文章的源码