如何使用 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 数据，暴露常量 shaan
最低0.47元/天 解锁文章
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
