echarts自定义地图行政区域

项目有个需求,根据业务区域,做一个区域展示大屏。以往用的一般都是按照行政区域来展示的,这次按业务区域,相比行政区域多了好几个新区域,要把原有区域进行拆分,在网上找了很久,各种办法都不太理想,最后只能手动划分。暂时没想到其他办法,有更好方法,还请不吝赐教,感谢。

下图是未划分和已划分图片

echarts自定义地图行政区域echarts自定义地图行政区域

网上找到了一个描点的在线工具,很强势,我就是通过这个来描点的:http://geojson.io/#map=15/36.6333/101.7302 长这样

echarts自定义地图行政区域

解决思路是,先将要拆分的区域,比如城中区域的坐标获取到(网上很多,下载一个区域行政代码,拷出来就行(https://abagnale666.github.io/ShpImage/(可以下载))),然后拷贝到上图右侧JSON栏,左侧地图就会描出区域,如下图:

echarts自定义地图行政区域

 

然后用边框上的五角工具描出你要拆分的区域,这块根据自己业务来描区域,描完之后,右侧会把新描绘的区域坐标追加到列表,只需要把自己想要的那块坐标拷出来,放到项目就行了

echarts自定义地图行政区域

比如上图之前是一块区域,我手动拆分开之后,把两块区域的坐标拷贝到项目里面,页面就会改过来了。

好了就这样,至于echarts的其他问题,可以查看下相关文档,另外说一句,图小还好,图大了描点手都要废了 0.0

参考:https://blog.csdn.net/myfmyfmyfmyf/article/details/92848549