概述

1. echarts繪制現(xiàn)有的geo數(shù)據(jù)地圖
2. geo地圖合并，并抹除重合邊界

echarts如何繪制現(xiàn)有的geo地圖

1. 訪問阿里云的數(shù)據(jù)可視化平臺，下載geojson數(shù)據(jù)

2. 以下載郴州市數(shù)據(jù)為例

   
   
   Pasted image 20211209164828.png
   
   

   在左側(cè)點(diǎn)擊所選擇的區(qū)域，勾選是否包含子區(qū)域（是否顯示各個(gè)市區(qū)域），然后直接下載即可。
   會(huì)得到一個(gè).geojson格式的數(shù)據(jù)

3. 代碼中引入

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: '市局機(jī)關(guān)', value: 77, adcode: 431099 }
]
export default function mapChart(): JSX.Element {
 echarts.registerMap('chenzhou', geoJson)
 return (
 <ReactEChartsCore echarts={echarts} option={echartsConfigForMap(data)} />
 )
}

4. 呈現(xiàn)結(jié)果

   
   
   Pasted image 20211209171712.png
   
   

   該地圖會(huì)顯示郴州市下所有的縣級市。

繪制合并地圖

前面只是將已經(jīng)現(xiàn)成的geojson數(shù)據(jù)繪制出來
如果遇到一個(gè)需求，需要將地圖合并，并抹除重合的邊界，該如何處理呢？
例如，需要將北湖區(qū)和蘇仙區(qū)合并成市局機(jī)關(guān)，geojson數(shù)據(jù)要如何處理呢？

解決方案

1. 訪問阿里云的數(shù)據(jù)可視化平臺，下載郴州市的所有縣級市g(shù)eojson
2. 訪問http://geojson.io/
   將蘇仙區(qū)和湖北區(qū)合并，并導(dǎo)出new.geojson
3. 用mapshaper工具來處理地圖合并，并去除重疊的點(diǎn)
   先全局安裝mapshaper
   npm install -g mapshaper
   可以參考地圖工匠秘籍
4. 執(zhí)行命令
   mapshaper new.geojson -dissolve2 -o result.geojson
   完成
5. 再次用http://geojson.io/
6. 把郴州市下的地級市（剔除北湖區(qū)和蘇仙區(qū)），result.geojson合并
   最后導(dǎo)出

7. 呈現(xiàn)結(jié)果

   
   
   Pasted image 20211209172806.png