现在是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",即可获取本文章的源码