使用mapshaper将echart地图合并,并取消内部边界

原文地址:blog.csdn.net/qq_19816325...

问题

echart地图区域合并,并不出现内部边界,按照之前的经验,每个区域都有自己的json数组,如果要调整区域划分,比如把A拆成AB或者把AB合并,只需要调整该区域的经纬度数组即可,但是会有个问题,合并之后会有边框,比如

需要两个网站

1、获取地图json数据,阿里地图选择器datav.aliyun.com/tools/atlas...

2、地图文件编辑mapshaper mapshaper.org/

1. 修改要处理的文件

首先将你要合并的地图文件,添加字段标识,name同级添加,名字自定义比如"area"。

举个栗子,我要将崇明区长兴区 合并成一个新区域叫新区 ,那么就在两个区域下面添加 "area": "新区",

2.将要处理的json上传到mapshaper

点击console打开控制台

输入执行命令生成新json文件并输出

dissolve 'area' -o result.json

dissolve:合并命令

'area':步骤一取得别名

-o:固定

result.json生成的文件,可自定义命名

3.修改最终json

生成完的json文件只有area,并没有name,但是地图里面是根据name展示的

用编辑器将所有的area 替换成name

然后将新的json文件引入即可

相关推荐
Alvin千里无风3 小时前
ECharts 世界地图实现完整指南
前端·echarts
军军君011 天前
数字孪生监控大屏实战模板:智慧城市大屏
前端·vue.js·typescript·前端框架·echarts·智慧城市·大屏展示
小旭95271 天前
SpringBoot 项目实战:ECharts 数据可视化 + POI Excel 报表导出完整版教程
java·spring boot·后端·信息可视化·echarts
快乐小土豆~~4 天前
echarts柱状图的X轴label过长被重叠覆盖
前端·javascript·vue.js·echarts
军军君014 天前
数字孪生监控大屏实战模板:可视化数字统计展示
前端·javascript·vue.js·typescript·echarts·数字孪生·前端大屏
淡笑沐白4 天前
ECharts入门指南:数据可视化实战
前端·javascript·echarts
_院长大人_5 天前
Vue + ECharts 实现价格趋势分析图
前端·vue.js·echarts
俺不会敲代码啊啊啊7 天前
封装 ECharts Hook 适配多种图表容器
前端·vue.js·typescript·echarts
尘中客11 天前
放弃 Echarts?前端直接渲染后端高精度 SVG 矢量图流的踩坑记录
前端·javascript·echarts·前端开发·svg矢量图·echarts避坑
Dxy123931021613 天前
ECharts折线图入门学习:从基础到实战的完整指南
学习·信息可视化·echarts