使用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文件引入即可

相关推荐
new出一个对象2 天前
vue使用echarts实现只显示一根线的图表
前端·vue.js·echarts
KeroroLX3 天前
uniapp项目中使用echarts
javascript·uni-app·echarts
那些免费的砖3 天前
Uni ECharts - 基于 ECharts 开发的 uni-app 跨端图表解决方案,和 Vue ECharts 用法几乎一致
vue.js·uni-app·echarts
那个村的李富贵5 天前
用MySQL玩转数据可视化
mysql·信息可视化·echarts
Yaru115 天前
伪3D地图和3D饼图实现
前端·3d·echarts
计算机学姐7 天前
基于SpringBoot的校园跑腿系统【数据可视化统计+原创精品】
java·vue.js·spring boot·后端·mysql·信息可视化·echarts
徐小夕@趣谈前端7 天前
NO-CRM 2.0正式上线,Vue3+Echarts+NestJS实现的全栈CRM系统,用AI重新定义和实现客户管理系统
前端·javascript·人工智能·开源·编辑器·echarts
艾斯特_11 天前
Echarts常用配置项及解释
前端·javascript·echarts
winfredzhang12 天前
从零构建:基于 Node.js 与 ECharts 的量化交易策略模拟系统
前端·node.js·echarts·股票·策略
叫我辉哥e113 天前
新手进阶Python:办公看板集成多数据源+ECharts高级可视化
开发语言·python·echarts