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

相关推荐
张人玉16 小时前
基于Vue 3 + ECharts / ECharts-GL / echarts-wordcloud 的数据可视化大屏——地形与产业数据可视化大屏
vue.js·信息可视化·echarts
paopaokaka_luck7 天前
英语单词学习系统的设计与实现(基于艾宾浩斯遗忘曲线的智能复习机制、语音朗读、多题型测试与错题自动收录、Echarts图形化分析)
vue.js·spring boot·后端·echarts
梦想的初衷~11 天前
《双 Agent 工作台 + 全栈 GIS 项目搭建:前端地图/空间数据库/后端/云部署指南》
人工智能·echarts·leaflet·webgis·ai 辅助编程
一份执念21 天前
ECharts 安装与使用完全指南:从全量引入到小程序分包优化
微信小程序·echarts
一份执念21 天前
uni-app项目 (vue+vite + uni-UI)中引入umd格式JS文件,微信小程序中导入报错处理方案
前端·uni-app·echarts
Darling噜啦啦1 个月前
Canvas 游戏开发与数据可视化实战:从飞机大战到 ECharts 报表
前端·echarts·canvas
Sweet锦1 个月前
Vue3 集成 ApexCharts 避坑指南:从动画失效到自定义指令的完美解决方案
vue·echarts
文阿花1 个月前
Echarts实现3D饼状图
前端·javascript·echarts·饼状图
文阿花1 个月前
Echarts实现自动旋转柱状3D扇形图
前端·3d·echarts
文阿花1 个月前
Echarts实现自定旋转3D饼状图
javascript·3d·echarts·饼状图