Echarts地图制作介绍

Eacharts地图

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

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

自定义地图

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

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

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

Echarts地图制作介绍_第1张图片

 

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

 

open----->file

https://img-blog.csdn.net/2018042000084356?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

 

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

 

save------>GeoJSON

https://img-blog.csdn.net/20180420001008450?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

https://img-blog.csdn.net/20180420001326819?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

https://img-blog.csdn.net/20180420004948501?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

https://img-blog.csdn.net/20180420001833626?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

https://img-blog.csdn.net/20180420001925395?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

https://img-blog.csdn.net/20180420002050555?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

https://img-blog.csdn.net/20180420002254900?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

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

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

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

https://img-blog.csdn.net/20180420003846695?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

删除后的样子是这样

https://img-blog.csdn.net/20180420003920999?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

https://img-blog.csdn.net/20180420004714904?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxOTYzMTMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

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

你可能感兴趣的:(web前端,Echarts,Echarts地图,geoJson)