Echarts地图制作介绍

Eacharts地图

Echarts地图采用的地图数据格式是geoJson。根据业务需求需要获取不同的地图数据,但是网上提供的地图数据最小是市级别的数据。更加精确的数据需要自己制作。

在ECharts中显示一个区需要单独的从省份中把这个区给扣出来,这时需要用到GEOJSON编辑工具,就是这个网站:http://geojson.io,有了编辑工具那你肯定还需要省份或者区的数据嘛,因为我们需要从省份里面扣出区的图层,从区里面扣出县的图层。上篇文章中给出的地图数据不满足要求,这里我在github上面找到了一个新的,可以去下载一下。地址:https://github.com/longwosion/geojson-map-china里面可以下载到市级的地图数据。

自定义地图

自定义地图就是使用http://geojson.io这个网站,画图。

下面来讲解这个网站如何使用:

打开网址我们可以看到这个网站的样子

 

网页的左上角是菜单栏,在open选项中打开我们需要编辑的json文件

 

open----->file

https://i-blog.csdnimg.cn/blog_migrate/174fe4485b01913d63c1b3970a3de69e.png

 

编辑完成之后在第二个save菜单中保存我们编辑的内容即可

 

save------>GeoJSON

https://i-blog.csdnimg.cn/blog_migrate/1b2f2880b729684ae99ef019355a5f34.png

在网页的中部有一块区域就是我们需要重点掌握的画图工具

https://i-blog.csdnimg.cn/blog_migrate/2a8f3436bc3b57efe5b74062dfc90bba.png

第一个就是根据点来绘图,绘制的都是线条形状的图形

https://i-blog.csdnimg.cn/blog_migrate/8b7368561fe890382ba9a2a3e9c606b2.png

第二个就是多边形,可以快速的绘制一个多边形区域或者是比较复杂的地图区域。

https://i-blog.csdnimg.cn/blog_migrate/9a26b2e0e0f637348607b69c988af2a6.png

第三个就是矩形,能够快速的绘制一个简单的矩形区域。

https://i-blog.csdnimg.cn/blog_migrate/70be2253dea02d97e9ad1d6acb35bf5c.png

当我们在地图上新增了一块区域之后还要为这块区域命名:

https://i-blog.csdnimg.cn/blog_migrate/bb2cd828c48eb97c824aae3cb65670d7.png

如图:点击这块新增的区域,会出现一个该区域的属性框,点击Add按钮,新增一个name属性值为分中心。这样就完成了地图区域的增加。

https://i-blog.csdnimg.cn/blog_migrate/cd44dda78430582e481382a393279671.png

上面这个图的左上角就是我自己绘制的,长沙的地图原本是只有下面这块区域的。

有了地图的增加,那么必然会有地图的合并。

以长沙为例,假如由于行政区域的划分,开福区和芙蓉区合并为一个区,那么我们就需要在地图上将这两个区进行合并。

首先将这两个区删除:点击芙蓉区和开福区然后把他们两个删除掉

https://i-blog.csdnimg.cn/blog_migrate/e918598779eb514196297694ce55de9f.png

删除后的样子是这样

https://i-blog.csdnimg.cn/blog_migrate/24b9a0e03acbb7ae8e6cb5790140555a.png

可以看到中间空了一块区域,然后再利用我们的点画图工具再地图上的那块空白区域进行绘制即可,利用多边形画图工具将空白区域的点链接起来即可,在绘制过程中利用鼠标滚轮尽量把地图扩大这样方便绘制并且绘制的更加精密,最后将它的名字修改成合并后的名字即可。

https://i-blog.csdnimg.cn/blog_migrate/4236de6bbbcb1797a56b11de93cda18d.png

最后将绘制完成的保存到本地即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值