如何使用 Echarts 给绘制出来的地图描边

Echarts 在绘制地图的时候，会根据 GeoJSON 中点的数据绘制出多边形的地图。有时候需求需要对地图的外边框，也就是整体的轮廓添加一些特殊的样式，这时候需要两组 GeoJSON 的数据去绘制当前的地图，一组 GeoJSON 的数据是用于绘制地图的整体轮廓，另外一组 GeoJSON 数据是用来绘制具体的地图区域，然后采用叠加的方式，得到最终的效果。

下面例子中，以陕西省为例。

获取 GeoJSON 数据

在绘制地图的时候，尽量采取同一个来源的 GeoJSON 数据，因为不同数据之间可能会存在一定的误差，导致最终绘制的效果变差。本文例子中的数据来源是来自这个网站的 https://hxkj.vip/demo/echartsMap/ ，可以非常方便的导出省市区的 GeoJSON 数据。

以绘制陕西省的地图为例，需要两组数据，一组是陕西省的 GeoJSON 数据，另外一组是陕西省轮廓的 GeoJSON 数据。陕西省的 GeoJSON 数据直接可以获取，陕西省轮廓的 GeoJSON 数据需要从全国地图数据中提取出来。

初始化

index.html 内容如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>地图轮廓</title>
</head><style>.map {width: 500px;height: 800px;}
</style><body><div class="map"></div><!-- 引入 echarts --><script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.js"></script><!-- 陕西省的 GeoJSON 数据，暴露常量 shaanxi --><script src="./shaanxi.js"></script><!-- 陕西省轮廓的 GeoJSON 数据，暴露常量 shaanxiOutline --><script src="./shaanxiOutline.js"></script><script src="./index.js"></script></body></html>

首先做一些初始化。

// index.js// 注册地图
echarts.registerMap('陕西省', shaanxi);
echarts.registerMap('陕西轮廓', shaanxiOutline);// 初始化 echarts, 创建一个 echarts 实例
const map = document.querySelector('.map');
const myChart = echarts.init(map);const option = {};myChart.setOption(option);

绘制陕西省轮廓

// index.js...const option = {geo: {map: '陕西轮廓',roam: false,zoom: 1,top: '5%',right: '5%',bottom: '1%',left: '5%',label: {show: false, // 不显示labelemphasis: {show: false}},show: true,},
}...

得到如下的轮廓：

绘制陕西省地图

// index.js
...const option = {geo: {map: '陕西轮廓',roam: false,zoom: 1,top: '5%',right: '5%',bottom: '1%',left: '5%',label: {show: false,emphasis: {show: false}},show: true,},series: [{name: '陕西省',type: 'map',map: '陕西省',roam: false,zoom: 1,top: '5%',right: '5%',bottom: '1%',left: '5%',tooltip: {show: false,},label: {normal: {show: true,position: "inside", //显示位置offset: [0, 0], //偏移设置color: "#7b89dc",formatter: "{b}", //圆环显示文字fontWeight: "lighter",fontSize: 12},emphasis: {color: '#ffffff',show: true},},}]
}...

得到如下地图样式：

可以看出来，在叠加以后边缘轮廓部分还是因为 GeoJSON 的多边形数据不是很一直，存在一小部分的误差。

设置轮廓样式

最后添加一些轮廓的样式和地图的样式

// index.js...const option = {geo: {map: '陕西轮廓',roam: false,zoom: 1,top: '5%',right: '5%',bottom: '1%',left: '5%',label: {show: false,emphasis: {show: false}},itemStyle: {normal: {borderColor: '#4a75ff',borderWidth: 5,areaColor: 'rgba(65, 82, 245, 0)',shadowColor: 'rgba(51, 69, 255, 1)',shadowBlur: 20},emphasis: {areaColor: 'rgba(0, 0, 0, 0)'}},hoverAnimation: false,show: true,},series: [{name: '陕西省',type: 'map',map: '陕西省',roam: false,zoom: 1,top: '5%',right: '5%',bottom: '1%',left: '5%',tooltip: {show: false,},label: {normal: {show: true,position: "inside", //显示位置offset: [0, 0], //偏移设置color: "#7b89dc",formatter: "{b}", //圆环显示文字fontWeight: "lighter",fontSize: 12},emphasis: {color: '#ffffff',show: true},},itemStyle: {normal: {borderColor: '#3d59cd',borderWidth: 1,areaColor: 'rgba(65, 82, 245, 0.2)',shadowColor: 'rgba(51, 69, 255, 0.5)',shadowBlur: 10},emphasis: {areaColor: 'rgba(65, 82, 245, 0.5)',}},}]
}...

最后可以自行调整一下中心市区名字的显示位置就可以了。