echarts自定义地图总结(VUE)
echarts自定义地图区域实现。地图Json分离、合并。将一个省拆分为两个省。现在打开下载好的自定义json发现地市之间有分界线,需求要求在原先的中国地图上以整体来呈现,接下来就要实现合并。想要实现地图区域合并,重点在于地图Json合并。...
需求:
全国地图中内蒙古地区分为蒙东、蒙西,河北省地区分为河北、冀北,需要自定义地图。
思路:
从json文件上做文章,例如整个中国地图的json里包含各个省的json,各个省包含各个市的json,以此类推,那么将一个省拆分为两个省,理论上来说是可以实现的。
实现:
先分后合
例如实现河北分为河北和冀北:
1、从阿里云datav的范围选择器下载地图json,范围选取所要区分的区域并且下载json格式文件:
2、选择阿里云datav的边界生成器上传刚下载的河北省json:
得到如下所示包含河北所有地市地图区域:
3、导出冀北范围地市:
勾选下方列表中的承德市、张家口市、唐山市、廊坊市、秦皇岛市(注意有分页),导出冀北json数据(导出的该地图json可作为省地图详情显示):
PS:下载完成后的文件格式为.geoJson,我直接修改后缀名为.json后暂时无其他问题。
4、现在打开下载好的自定义json发现地市之间有分界线,需求要求在原先的中国地图上以整体来呈现,接下来就要实现合并。想要实现地图区域合并,重点在于地图Json合并。
方法一:
1)进行第3步时不着急导出所选范围地市,而是选择所需合并区域,点击进行合并后再导出:
2)得到整块冀北地图后,导出geoJson:
方法二:
1)编辑地图文件:
打开第三步下载的json格式的地图文件,添加新字段area(字段名称随意):
2)利用mapshaper 进行地图编辑:https://mapshaper.org/
·点击select上传地图:
·点击import加载地图:
·打开console控制台,利用dissolve命令合并区域并导出编辑完成的地图,
dissolve 'area' -o jibei.json
得到完整冀北地图json文件。
5、剩余河北地图同理。最后将新河北json、新冀北json替换掉原先china地图中的河北json区域即可。
注意:第4步使用方法二时,对编辑替换的地图文件需再次进行修改:将原本的area字段替换成name(在echarts中默认识别name名称),并添加cp字段指定区域的中心点,得到最终效果。
该方法只适用于对已知地市县区域进行划分、合并,若要完全自定义区域可使用阿里云datav边界生成器选点划区域进行操作,或者使用geojson(http://geojson.io)制作所需要的json数据。
Update:
特定企业有自己的区域划分,坐标文件(.shp等)也可以用https://mapshaper.org/导入后,转为JSON文件,但是要注意导出文件略有不同,需要手动修改。
导出:
导出的geojson需要重新整理格式(图一为mapshaper导出,图二为标准的echart用的json):
更多推荐
所有评论(0)