概述
- echarts绘制现有的geo数据地图
- geo地图合并，并抹除重合边界
echarts如何绘制现有的geo地图
- 访问阿里云的数据可视化平台，下载geojson数据
-
以下载郴州市数据为例
Pasted image 20211209164828.png
在左侧点击所选择的区域，勾选是否包含子区域（是否显示各个市区域），然后直接下载即可。
会得到一个.geojson格式的数据 - 代码中引入
import React from 'react'
import ReactEChartsCore from 'echarts-for-react/lib/core'
import echarts from '@/util/echarts-loader'
import { echartsConfigForMap } from '@/util/echarts'
const geoJson = require('@/asset/json/chenzhoushi.json')
const data = [
{ name: '安仁县', value: 1, adcode: 431028 },
{ name: '永兴县', value: 5, adcode: 431023 },
{ name: '资兴市', value: 11, adcode: 431081 },
{ name: '桂东县', value: 5, adcode: 431027 },
{ name: '汝城县', value: 44, adcode: 431026 },
{ name: '桂阳县', value: 17, adcode: 431021 },
{ name: '嘉禾县', value: 25, adcode: 431024 },
{ name: '临武县', value: 52, adcode: 431025 },
{ name: '宜章县', value: 77, adcode: 431022 },
{ name: '北湖区', value: 33, adcode: 431002 },
{ name: '苏仙区', value: 22, adcode: 431003 },
{ name: '市局机关', value: 77, adcode: 431099 }
]
export default function mapChart(): JSX.Element {
echarts.registerMap('chenzhou', geoJson)
return (
<ReactEChartsCore echarts={echarts} option={echartsConfigForMap(data)} />
)
}
-
呈现结果
Pasted image 20211209171712.png
该地图会显示郴州市下所有的县级市。
绘制合并地图
前面只是将已经现成的geojson数据绘制出来
如果遇到一个需求，需要将地图合并，并抹除重合的边界，该如何处理呢？
例如，需要将北湖区和苏仙区合并成市局机关，geojson数据要如何处理呢？
解决方案
- 访问阿里云的数据可视化平台，下载郴州市的所有县级市geojson
- 访问http://geojson.io/
将苏仙区和湖北区合并，并导出new.geojson - 用mapshaper工具来处理地图合并，并去除重叠的点
先全局安装mapshaper
npm install -g mapshaper
可以参考地图工匠秘籍 - 执行命令
mapshaper new.geojson -dissolve2 -o result.geojson
完成 - 再次用http://geojson.io/
- 把郴州市下的地级市（剔除北湖区和苏仙区），result.geojson合并
最后导出 -
呈现结果
Pasted image 20211209172806.png
