专栏首页企鹅号快讯详解百度echarts如何自定义地图板块,实现鼠标交互效果

详解百度echarts如何自定义地图板块,实现鼠标交互效果

声明:理工科的同志,语言组织能力差,轻喷

先吐槽一下,自从大数据流行起来过后,做开发的很多朋友都遇到了一个调侃的问题:为什么你们都那么喜欢研究地球。我只能说,没办法啊,现在的大数据需求,动不动就是我需要在地图上实时显示数据变化。

吐槽结束、装逼开始

之前公司做项目的时候,遇到了一个问题,就是要在地图上展示各个乡镇的灾害数据。然而用过echarts的朋友应该都知道,echarts提供的地图数据,最小只能到县级,县级以下的数据是没有的。刚开始拿到这个需求的时候,我是无从下手的,因为我不知道怎么自定义地图。还好公司有个前端经验比我丰富的,他说可以用canvas把地图画出来。所以我们当时的约定是,等他用canvas把地图画好后,我再用它画好的地图进行数据渲染。过了几天,地图确实是画出来了,但地图是死的,关于echarts的那些功能,一个都不能用,必须自己写,但对于用画布画地图这点,一是我佩服他,也让我学会了怎么画,感觉还是蛮有收获的。这对我来说,能力达不到,从需求角度来说,这样太死了,不灵活。于是我开始研究关于echarts自定义地图的方式。首先的想到的是,echarts不是有个注册地图的功能吗,我去下载一个中国的地图json下来,对着格式写一个再注册不就OK了吗。但是,想法很美好,现实很残酷。第一,不知道什么原因,官网的地图不提供下载了,当时还说了不能下载的原因,'ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务'。我写到这里时的时间是2017-12-16 21:00:03,特意去官网看了一下,还是不能下载。后来好不容易找到地图数据了,却又大失所望了,里面的数据就跟你用记事本打开一张图片的感觉一样,完全不知道什么意思。所以等于没什么作(luan)用。

至于后来,我也不知道从哪里看到了一个json文件,还算能看懂,就照着那个样子试了一下,没想到还真的行了。这里说的行,是指我把自己照着写的json文件通过echarts调用,真能渲染出一块地图信息来了。于是,我开始了地图的获取,但当你解决了数据格式的问题之后,你会发现,地图数据的获取才是个麻烦事。因为你不仅要知道个地区的边界点,你还得把这些点一个一个的从地图上找出来,最重要的一点,就是当两个地区有共享的边界线时,你得保证数据一模一样。我这里先说一下地图文件的json格式,再说怎么在地图上获取点的操作。

json格式文件如下:

varXwByMapJson={

"type":"FeatureCollection",

"features":[

{

"type":"Feature",

"properties":{

"id":"35",

"name":"六屯镇",

"cp":[106.841247,26.96184],

"childNum":1

},

"geometry":{

"type":"Polygon",

"coordinates":[

[

[106.778869,26.964416],

[106.783755,26.964545],

//...

]

/*一个区域被分成多块了的时后,

* 这里继续添加数组就行*/

]

}

},

{

"type":"Feature",

"properties":{

"id":"31",

"name":"谷堡乡",

"cp":[106.514695,26.856174],

"childNum":1

},

"geometry":{

"type":"Polygon",

"coordinates":[

[

[106.521306,26.908246],

[106.525331,26.899999],

//...

]

]

}

},

{

"type":"Feature",

"properties":{

"id":"102",

"name":"白云区",

"cp":[106.671072,26.717884],

"childNum":1

},

"geometry":{

"type":"Polygon",

"coordinates":[

[

[106.67021,26.787695],

[106.688032,26.794274],

//...

]

]

}

}

]

}

这里简单说明一下,各个属性的key值不能变,type属性对应的value是固定不能变的,coordinates属性下的数组,层级不能少。由于微信公众号的文字限制,我不可能把整个json文件全部展示出来,想必聪明的你已经猜到了,我打省略号的地方,就是地图数据,一个数组对应一个点,第一项表示经度,第二项表示纬度。但如果一个地区是由几个小部分组成的,就分成多个数组,每个数组表示一个区块,具体看代码中我加/**/的地方。id和name是根据自己的实际情况来填写,features数组里面的每一个对象代表一个地区,childNum就是子区块个数的意思。

再说一下关于地图点的获取问题。首先,你必须得有一张地图,上面得有各个地区的边界线,因为有了边界线,你才知道点应该描在地图的哪个地方。我当时是由设计师那边提供了一张各乡镇的地图才搞定的,看一下最终效果图。鼠标移到某个区块的时候,会显示受灾总面积,移到具体的某个点上的时候,显示本区域该灾害的面积。

以我上面的json为例,在echarts中注册地图数据。

varmyChart = echarts.init(document.getElementById('canvasContainer'));

echarts.registerMap('XW', XwByMapJson);

注册好之后,你就可以用echarts的所有API了。

本文来自企鹅号 - 全球大搜罗媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 卷积神经网络CNN原理详解(一)——基本原理

    作者:Charlotte77数学系的数据挖掘民工 博客专栏:http://www.cnblogs.com/charlotte77/ 个人公众号:Charlott...

    企鹅号小编
  • Bootstrap项目实训干货:设计简单登录框

    一、实验目标 基本上每个web项目都会有网站登录模块,我们今天要实现的登录框是以弹出的方式呈现。页面如下: ? 二、实验环境 此登录框采用bootstrap框架...

    企鹅号小编
  • USB设备无法识别怎么办怎么数据恢复

    usb接口设备在我们生活中非常普遍,比如我们常见的USB鼠标,usb键盘,usb音箱,U盘等等,但使用usb设备也会伴随着各种各样的问题发生,如常见的usb无法...

    企鹅号小编
  • SSH 连接远程终端实用教程

    作为后端开发者,难免要经常与服务器打交道,部署项目,查看日志,排查问题等等,除了开发工作,其余时间基本都在终端上,那么你是怎么连接上服务器的呢?直接粗暴地用账号...

    张乘辉
  • PHP Elasticsearch的基本使用方法

    对于Elasticsearch与Elasticsearch-php的安装,网上有比较多的教程,这里不再累述。只是要注意Elasticsearch、Elastic...

    双面人
  • Elasticsearch的Index和Mapping(二)

    本文使用的Elasticsearch版本为6.5.4,基本命令以及操作大都通用。下面通过MySQL与Elasticsearch的对比图,让我们更好地理解接下来的...

    用户3467126
  • 【直播预约】TRTC SDK开发应用大赛决赛火热来袭!

    ? 腾讯云 Tencent Cloud 为期一个月的作品开发 相信各位参赛选手都准备就绪了 各位大神齐聚一堂 究竟哪一位参赛选手会 脱颖而出揽获大奖? 下周日...

    腾讯即时通信IM
  • 阿里 & 酷家乐:实习生面试

    最近海投了十家公司,暂时有阿里两面(已凉)、酷家乐两面(大概凉了)、网易一面。前两个都是基础知识发挥得还可以,两家公司二面都凉凉。 阿里一面(3.21 26mi...

    牛客网
  • SQL报错注入常用函数

    SQL报错注入定义 SQL报错注入基于报错的信息获取,虽然数据库报错了,当我们已经获取到我们想要的数据。例如在增加删除修改处尝试(insert/update/d...

    cn0sec
  • 郭卓惺:互动课堂的搭建实例及相关领域应用

    随着在线教育覆盖面的增加,互动课堂授课方式正在向多样化发展,为了适应新形式的发展,腾讯视频云推出了全平台覆盖的互动课堂解决方案。为客户打通了直播、实时音视频、点...

    云加社区技术沙龙

扫码关注云+社区

领取腾讯云代金券