获取省市区geoJson数据（精确到县、镇）用于echarts实现地图数据可视化

写在前面

本文着重介绍关于获取数据的部分，如果数据处理好了，不会使用echarts将地图绘制出来，可以参考echarts的官方文档，或去搜寻大佬们的教程，或者另外问我，我再写一份我自己理解的关于echarts绘制地图的使用。

本文前半部分实现的效果很多软件都可以实现，但精确不到县级市的子区域也就是镇级。因此如果有镇级需求的可以直接拉到后半部分。

先看效果：

熟悉echarts的看到这个图之后，都想到了什么？没错，就是官方示例里的香港18区人口密度图：

从官方示例代码我们可以看到，生成图中各区域地图的，就是引入的这个json文件：

那么，如果我们想要生成自己想要的地区地图，只要拿到相应地区的json文件就可以了。这个文件里面主要是什么内容呢？把这个文件地址打出来打开它，我们可以看到，它是geoJson格式的：
（这里补一下GeoJson的百科链接，第一次接触的小伙伴可以了解一下：百度百科 - geoJson）

因此，我们如果能拿到自己需要的区域的geoJson数据，引入之后就可以生成对应的地图区域了。那么，这样的数据从哪里来呢？
这里推荐一个比较好用的网站：地图选择器
打开之后是这样子的：

其中，左上角的输入框可以输入选择自己想要的地区：

也可以将鼠标悬停在右边的地图上，会浮现出当前停在的城市名称及区域编码（adcode）和级别（province）：

双击后可以打开它的子级地图，如本文上张图选择的是江苏省，双击后打开的就是江苏省的地图：

这样利用搜索后，或者用地图逐级选取，即可选到自己想要的地区。地区选好之后，可以利用下图标注的方法获取数据：

标号①处是该json文件的地址，直接用就可以，注意，它是不带子区域的，而标号②是包含子区域的。可以使用标号③处的勾选来切换。区别在于如果不选用包含子区域，生成的地图是没有子区域分割的，如下图：

标号④是整个文件的内容，可以直接拷贝使用。注意上面的切换是否包含子区域按钮会影响到这里面的数据，在使用的时候要注意自己的需求。
最后标号⑤的两个按钮可以下载geoJson格式数据，或svg格式图片，如果只是想用这个地区形状也是没问题的。

到这一步为止，除了上述介绍的这个网站，运用其他比如百度地图、高德地图，谷歌地图等各种地图软件，都是可以拿到上述数据的，但如果我们想要一些县级市的数据，比如常熟，你会发现它是这样子的：

注意到了吗？没错，它是没有子区域的。这里并不是我没有勾选包含子区域那个选项，而是它只到这一级为止。不只是这个网站只到这一级，很多地图软件能拿到的数据也都只到这一级。那么，如何才能拿到它子区域的数据，从而生成本文开篇的那张图的效果呢？
这里先推荐一个网站：geojson.io，打开可能有点慢。
这个网站打开之后是这样子的：

左边是地图，右边是对应你选中区域的geojson数据。图中因为还没有选择区域，所以右边是空的。
点开左上角的open，可以导入你需要的文件。格式很多，本文接下来的例子使用的是kml格式的文件，其他格式请自行研究，本文不再进行扩展。
这个网站还可以自己去绘制路径，相关功能也不在本文展开了。
这里先补上kml的百度百科：百度百科 - kml
百科里也介绍了，可以使用google earth来创建kml文件，但我还不太会用，所以我这里使用的是bigMap。这个软件如果要下载地图要正版授权（似乎可以免费授权），但如果只是用导出选择区域kml文件功能是不需要授权的，可以直接免费使用。当然这里还是建议大家使用正版授权（本文关于该软件的内容如果涉及到权益问题请联系我进行删除）。
下载安装之后打开，可以在右上角进行区域的选择，可以发现，它是精确到镇级的：

这里不要点击左边的下载按钮，请选择图中红框选中的按钮，即可保存kml文件。这个里面的数据就是你选择的区域，可以在地图上看到效果：

把导出的kml文件导入到刚才的geojson.io网站，就变成了下图这样（和上图不一样是因为我上面选择的是虞山镇，这里选的是我导出的碧溪街道的kml文件，不影响理解）：

可以看到，左边就是你导入文件选择的数据区域，右边则是自动生成的geojson数据。
这样就完成了常熟市其中一部分区域的绘制。接下来只要把所有区域选择，生成kml文件导出，再导入到这个网站，像拼拼图一样拼起来就可以了。这边open也是可以打开多个文件的，虽然不支持一次性选择多个，但一个一个选择打开也不影响。
这里只拼一部分，不全部拼了，大家按自己需要使用就可以了。

全部导入拼好之后，全选右边的数据，新建一个.json文件，拷贝进去保存，这样引用的时候就可以正常使用了。

总结一下

本文在实现这个需求的时候没有发现可以直接获取镇级子区域geojson数据的网站或软件，因此使用了这种折中的办法，利用拼接还原整个区域，如果大家有更好的方法拿到镇级子区域geojson数据，请在评论指正，不胜感激！
那么归根结底，想要实现地图数据可视化，一定要有相关区域的geojson格式数据的支持，难点就在于过于精确的区域数据并不是很好获取，需要寻找借用各种软件。本人在研究这个需求实现的过程中也尝试了各种网站和软件，效果都不是很理想，大部分都只能精确到县级市，因此在这里将我最终的实现方法记录分享，欢迎各位大佬一起讨论研究。

注意

后续测试发现用这种方法合成张家港市子区域的地图时，地图无法显示出来，我把张家港市各子级geojson数据一个一个单独格式化之后发现，张家港市经济开发区的结构和张家港市其他区域或者比如常熟市的有区别：

常熟：

张家港（经济技术开发区）：

可以看到，是多了一层的。暂时不知道这多出来的一层是什么原因，但如果将这一层去掉，变成像常熟市那样的结构或者张家港市其他子区域的结构，那张家港市的也可以全部正常显示了。所以推测echarts的源码在进行处理的时候并没有考虑到这个情况，只是直接去读指定字段里的内容，如果报错就整个挂了。并且这个现象只出现在张家港市经济开发区，如果在拼张家港市地图的时候不拼这个区域，只拼其他的比如杨舍镇，整体结构和常熟之类的是完全一样的，也能正常显示，所以就是在拼这个经济开发区的时候给整个多加了一层，导致出了问题，我又尝试了其他如镇江等地区，都没有发现这个现象。目前暂时未发现其他地区的数据结构和这个一样，大家在使用时要注意一下，如果发现了也可以在评论记录一下。
那么上述问题的解决办法就是把经济开发区这多出来的一层去掉，再去拼他就不会给整体加这一层了。目前还未发现去掉这一层有什么影响，等待后续再进行研究。

题外话

有的小伙伴这样处理好数据，在使用echarts时，会发现地图显示不出来，报错如下：

可以根据报错得知，这是引入本地资源时跨域了。CORS 策略只支持http、data、 chrome、chrome-extension 以及 https。那么如果直接双击打开使用 file 协议的html 文件，就不受浏览器 CORS 支持了。

这里可以使用前端应用启动服务anywhere来解决这个问题。它可以将当前目录变成一个静态文件服务器，能像资源管理器一样可视化预览目录下的一切文件，并且支持http 和 https协议。
首先使用命令npm i anywhere -g全局安装，然后直接在控制台输入anywhere即可正常使用了。
如果报错npm 不是内部或外部命令，说明你还没有安装node.js。先去安装吧，这里就不展开了。
当然如果你把这个数据文件上传到服务器，前端直接引用，也就不存在这个问题了。

如果数据都处理好了，echarts不知道怎么用，可以直接去看官方文档，还是比较好懂的，有不会的也可以问我。