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

相关推荐
满栀58518 小时前
原生JS + ECharts 多图表可视化实战:从业务实现到工程化优化
开发语言·javascript·echarts
paopaokaka_luck4 天前
基于springboot3+vue3的智能文库平台(AI智能搜索、AI智能汇总、实时在线状态展示、多格式文档预览与富文本编辑、Echarts图形化分析)
前端·网络·spring boot·网络协议·echarts
Highcharts.js6 天前
基于Highcharts开发的OHLC 股票K线图完全指南
javascript·信息可视化·echarts·数据可视化·highcharts·ohlc
脾气有点小暴6 天前
ECharts 伪 3D 柱状图完整注释 + 实现原理说明
前端·3d·信息可视化·vue·echarts
李昊哲小课6 天前
FastAPI + Echarts 构建可交互数据仪表板
信息可视化·echarts·fastapi
Smile_ping8 天前
tooltip在真机上出现图形阴影?
echarts·tooltip图形阴影设置
金融小白数据分析之路8 天前
绍兴市镇街echarts 制作
前端·数据库·echarts
shmily麻瓜小菜鸡8 天前
浏览器在请求外部图片(403 Forbidden)问题
vue.js·vscode·echarts·angular.js
paopaokaka_luck9 天前
基于Springboot3+Vue3的高校选课系统(AI选课助手、协同过滤算法、分享到微博、扣扣、Echarts图形化分析)
网络·spring boot·网络协议·echarts
张人玉9 天前
基于 Vue 3 + ECharts + Express + SQLite 构建的新能源汽车销量数据分析与可视化平台——新能源汽车销量数据分析系统
数据库·vue.js·sqlite·echarts