前言:最近用echarts画地图,由于客户要求,需要显示贵安新区,但是echarts的json是没有贵安新区的经纬度,百度也没有贵安新区的边缘经纬度,为此只好自己画一个贵安新区。
前期我的做法是:用geojson工具用锚点的方式画出一个贵安新区的大致区域,将其保存为geojson文件,然后将这个加入到原有的guizhou.json中,并命名为贵安新区;但是有个bug,就是点击贵阳市和安顺市的时候,贵安新区的部分区域也会高亮,因为这种方式并未改变贵阳和安顺的边缘。
1、找到贵州初始经纬度数据:https://github.com/longwosion/geojson-map-china/blob/master/geometryProvince/52.json?short_path=d926a2c
2、将json数据粘贴到GEOJSON编辑工具(http://geojson.io),如下图:

3、点击Save中的GeoJson,将其保存成geojson格式
4、打开地图拆分工具(http://www.dnccn.com/mapchaifen.html),将刚才保存的geojson文件拖进左侧的框框中,如下图:

5、根据资料显示贵安新区是“贵阳市”和“安顺市”中间的区域,首先选中贵阳市,然后在右侧的工具栏拖动选中分隔点1和分隔点2,并且输入分隔区域的名字,点击右侧的下载。

6、将下载的文件导入右侧的“编辑地图”中,点击工具栏中的编辑图标(倒数第二个),拖动修改刚刚的切割边缘。(注意:边缘线有两条,记得两条线调整的时候要一致,贵阳市的边缘就会调整,而不会出现点击贵阳的时候还会显示贵安新区的一部分),保存后保存成geojson文件(一定要点save后再保存)
调整前:

调整后:

7、地图拆分工具:将刚才保存的文件拖动到右侧的第4个方框中,点击第五点的下载。然后将下载后的文件拖到左侧区域,如下图:

8、选中安顺市,按5、6操作切割安顺边缘

(注意:边缘也是两条,两条记得调整成一样的;贵阳市分出来的贵安新区的边缘要和安顺切割的贵安新区的边缘调整成一样的)
9、最后将两个文件合并起来,如下图:(记得下载压缩后的文件)

10、由于这种切割方式是会有两个贵安新区,所以打开geojson后删除一个贵安新区,导入项目,替换原来的guizhou.json就可以使用。
网友评论