Echarts地图详解（地图样式、合并地图、增加地图）

概述

        地图在我们日常的数据可视化分析中是很常见的一种展示手段，不仅美观而且很大气。尤其是在大屏展示中更是扮演着必不可缺的角色。

地图实现

下面我们就来实现一个基本的地图，并为之添加一些好看的样式。

示意图如下：

一个基本的地图就出来了。

提出问题

        熟悉长沙的人就会知道，在上面这个地图中，多了一块区域“分中心”，在长沙的地图板块中是没有这个区域的，那么我是怎样将他改变成这样的呢。

        这其实是当初用户提出的一个需求，因为他们中是有一个分中心的，而长沙地区是没有这个地图区域的，所以最后决定是添加一块湖南缩略图样式的区域来代表这个分中心。

        当初也是找了很多资料，没有找到合适的办法，然后决定用两个地图来表示，然后给用户看了样式，用户也觉得很满意，但是在真正开发过程中确遇到了很多问题，数据不好一起展示和联动。后来也是找了很久才找到一个网站

http://geojson.io

这个网站完美解决了我的问题。

自定义地图

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

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

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

open----->file

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

save------>GeoJSON

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

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

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

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

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

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

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

 

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

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

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

删除后的样子是这样

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

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

地图的东西大概就是这么多，有问题的可以留言一起讨论。

最后送上一个3D版的地图：

效果图：

 

全国各省市地图json数据