如何使用 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>