echarts绘制geo地图

概述

1. echarts绘制现有的geo数据地图
2. geo地图合并，并抹除重合边界

echarts如何绘制现有的geo地图

1. 访问阿里云的数据可视化平台，下载geojson数据

2. 以下载郴州市数据为例

   
   
   Pasted image 20211209164828.png
   
   

   在左侧点击所选择的区域，勾选是否包含子区域（是否显示各个市区域），然后直接下载即可。
   会得到一个.geojson格式的数据

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: '北湖区', 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 (
 
 )
}

4. 呈现结果

   
   
   Pasted image 20211209171712.png
   
   

   该地图会显示郴州市下所有的县级市。

绘制合并地图

前面只是将已经现成的geojson数据绘制出来
如果遇到一个需求，需要将地图合并，并抹除重合的边界，该如何处理呢？
例如，需要将北湖区和苏仙区合并成市局机关，geojson数据要如何处理呢？

解决方案

1. 访问阿里云的数据可视化平台，下载郴州市的所有县级市geojson
2. 访问http://geojson.io/
   将苏仙区和湖北区合并，并导出new.geojson
3. 用mapshaper工具来处理地图合并，并去除重叠的点
   先全局安装mapshaper
   npm install -g mapshaper
   可以参考地图工匠秘籍
4. 执行命令
   mapshaper new.geojson -dissolve2 -o result.geojson
   完成
5. 再次用http://geojson.io/
6. 把郴州市下的地级市（剔除北湖区和苏仙区），result.geojson合并
   最后导出

7. 呈现结果

   
   
   Pasted image 20211209172806.png