概述
- echarts繪制現(xiàn)有的geo數(shù)據(jù)地圖
- geo地圖合并，并抹除重合邊界
echarts如何繪制現(xiàn)有的geo地圖
- 訪問阿里云的數(shù)據(jù)可視化平臺葱蝗，下載geojson數(shù)據(jù)
-
以下載郴州市數(shù)據(jù)為例
Pasted image 20211209164828.png
在左側(cè)點擊所選擇的區(qū)域圃验，勾選是否包含子區(qū)域（是否顯示各個市區(qū)域）掉伏，然后直接下載即可。
會得到一個.geojson格式的數(shù)據(jù) - 代碼中引入
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: '北湖區(qū)', value: 33, adcode: 431002 },
{ name: '蘇仙區(qū)', value: 22, adcode: 431003 },
{ name: '市局機關(guān)', value: 77, adcode: 431099 }
]
export default function mapChart(): JSX.Element {
echarts.registerMap('chenzhou', geoJson)
return (
<ReactEChartsCore echarts={echarts} option={echartsConfigForMap(data)} />
)
}
-
呈現(xiàn)結(jié)果
Pasted image 20211209171712.png
該地圖會顯示郴州市下所有的縣級市损谦。
繪制合并地圖
前面只是將已經(jīng)現(xiàn)成的geojson數(shù)據(jù)繪制出來
如果遇到一個需求岖免，需要將地圖合并岳颇，并抹除重合的邊界照捡，該如何處理呢？
例如话侧，需要將北湖區(qū)和蘇仙區(qū)合并成市局機關(guān)栗精，geojson數(shù)據(jù)要如何處理呢？
解決方案
- 訪問阿里云的數(shù)據(jù)可視化平臺瞻鹏，下載郴州市的所有縣級市g(shù)eojson
- 訪問http://geojson.io/
將蘇仙區(qū)和湖北區(qū)合并悲立，并導(dǎo)出new.geojson - 用mapshaper工具來處理地圖合并，并去除重疊的點
先全局安裝mapshaper
npm install -g mapshaper
可以參考地圖工匠秘籍 - 執(zhí)行命令
mapshaper new.geojson -dissolve2 -o result.geojson
完成 - 再次用http://geojson.io/
- 把郴州市下的地級市（剔除北湖區(qū)和蘇仙區(qū)）新博，result.geojson合并
最后導(dǎo)出 -
呈現(xiàn)結(jié)果
Pasted image 20211209172806.png
