【echarts地图制作】下钻到乡镇/街道级别的

需求

展示西安市各区县的地图，点击各区县下钻到各乡镇/街道，只能内网环境使用，不可用通过百度/高德地图来实现。

解决

利用地图数据生成区域的geojson

网络上大部分地图数据只是到省市，最多到区县，再往下的数据就比较难找了；经过搜索，找到了一个可以买地图数据的地方，数据可以精确到乡镇/街道，价格还比较划算；

地图数据格式为shp（shape格式），如果需要其他的格式，得加点钱获取比如svg、dbf、shx等额外格式的文件；
echarts支持的格式有geojson，此时我们需要一个工具把shp格式的文件转换为geojson格式，推荐2种工具：

• 在线转换工具MyGeodata Converter

这个工具是收费，每月最多可以转换3次文件，上传时网站会提示：

Don't forgot to upload all relevant files to your .SHP file - you need at least also .DXF and .SHX files uploaded together with your .SHP file!

不仅要上传shp格式，还要上传dbf和shx等格式的文件，来获得更完整的地理数据，如果把所有格式的数据都上传了，那么生成的geojson可能会有问题（亲测），所以只上传3种格式是比较稳妥的办法；

上传后会跳转到一个设置的界面，先不要点击开始转换按钮，首先检查一下转换的编码格式，默认为UTF-8，如果是中文的地图数据，最好把转换格式切换为GB18030-Chinese格式；然后点击开始转换就可以了。

转换超过3个会提示下图，这时可以清一下浏览器缓存试试：

转换后可以下载到.geojson格式的数据文件，放到项目中时，把.geojson格式手动修改为.json格式，就可以被echarts使用了，直接import geojson格式的文件会报错；

• mapshaper(http://mapshaper.org/)

同时上传.dbf .shp .shx .prj格式的文件，然后点击右上角的export，就会看到如下界面，选择geoJSON，就完成了。

利用geojson展示自定义的echart地图

关于具体如何导入json格式数据到echarts的方法，可以参考官方示例。
以下是我自己的代码：

结果

设计图的地图效果是3D的，为了达到效果，将地图的颜色设为透明，使用设计图作为背景图，此时需要调整echart地图的比例（top/bottom/right/left），调整好之后，地图选择高亮和点击事件，和地区名字还是继续用echart实现。最终结果：

参考文章

• https://blog.csdn.net/gisboyg...
• https://www.cnblogs.com/sd-ax...