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

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

antV/L7@2.2.19-」世界地图+散点图
之前更新过@antv/L7->1.3.20版本->北京地图+散点图,链接可点,源码也放在了公众号里,这一篇@antv/L7->2.2.19版本的源码也会放在公众号里,可在最后提取.以 ...
AntV L7地图可视化入坑笔记
先用 HTML CDN的方式跑起来一个地图案例: 官方案例地址:https://codesandbox.io/s/laughing-fermat-fjy5y?file=/index.html:491- ...
antv/l7 设置图例
引入Control 基类 import { Control } from "@antv/l7"; 初始化基类 const legend = new Control({positio ...
antdesign 地图_“炫酷狂拽”的 AntV - L7 地图可视化设计
导读随着多媒体技术的发展,数据可视化呈现越来越丰富的多维度表达,尤其三维技术的成熟,给了可视化更多的想象空间,呈现出百花齐放的地理可视化景象,各类模拟城市应用则是在地理可视化领域的强劲运用,在惊叹空 ...
「北京当代·艺术博览会 — 重聚」共聚北京主场开启北京时间
「北京当代·艺术博览会 - 重聚」将于2023年4月28日至5月1日,在北京的全国农业展览馆11号馆举办.其中4月28日和29日为贵宾预览日,4月30日和5月1日为公众开放日.作为今年内地第一场即将举 ...
html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图
echarts的3D地图实在太丑了,还一堆bug 使用阿里的Antv可视化库L7,实现3D地图,底图是mapbox 参考示例:https://l7.antv.antgroup.com/zh/examp ...
【数据可视化】Antv L7给地图添加图例Legend
地图组件用于控制地图的状态如果平移,缩放,或者展示地图一些的辅助信息如图例.比例尺 L7 目前支持 Control Zoom 放大缩小 Scale 比例尺 Layers 图层列表组件介绍: impo ...
【Antv/Vue3】vue项目中使用antv/L7制作地图
官网地址:快速上手 | L7 CDN方式引入: <head> <! --引入最新版的L7--> <script src = 'https://unpkg.com/@ant ...
使用AntV L7实现地图/世界地图GeoJson资源分享
尝试了 https://blog.csdn.net/qq_29918313/article/details/118361046 作者:Delicia_Lani Hicharts实现世界地图思路及踩过的 ...

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

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

最新文章

热门文章