echarts画市县乡镇级地图

阳光穿透心脏的1/2处 2021-11-06 01:01 1468阅读 0赞

echarts作为图标制作工具，近来地图数据不再提供下载。现在需要绘制一个县级的地图，而网上的资料基本都是绘制省级地图。在此记录一下绘制市县级地图的办法。

首先描述一下原理，

echarts.registerMap('yongjia',geoJson,{});

这行代码，是绘制echarts地图的重点。GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。**在这个结构中，保存着大量的点的经纬度坐标，通过连接这些点，来绘制地图**。所以GeoJSON数据就显得格外重要。

附上**浙江省所有市**的GeoJSON

[https://download.csdn.net/download/sinat\_29774479/11504982][https_download.csdn.net_download_sinat_29774479_11504982]

下面我以温州市为例，画一个demo，效果图如下

![温州市地图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI5Nzc0NDc5_size_16_color_FFFFFF_t_70] 温州市地图

代码如下

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    	<script src="./js/echarts.min.js"></script>
    
    	<title>温州市地图</title>
    </head>
    <body>
    	<div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
    </body>
    <script>
    	var myChart = echarts.init(document.getElementById('map'));
    	$.get('./json/datas.json',function(geoJson){
    		echarts.registerMap('wenzhou',geoJson,{});
    		var option = {
    		    series: [
    		        {
    		            type: 'map',
    		            mapType: 'wenzhou',
    		            aspectScale: 0.85,  //地图长度比
    		        }                              
    		    ]
    		};
    		myChart.setOption(option);
    	});
    </script>
    </html>

--------------------

接下来就要说到县级，县级地图数据实在是过于麻烦。现在我找到的办法就是，先从google地图下载kmz或者kml文件

[https://download.csdn.net/download/sinat\_29774479/11505044][https_download.csdn.net_download_sinat_29774479_11505044]，然后导入到[http://geojson.io][http_geojson.io]中。我下载到的版本中，确实有划分了乡镇街道的划分，但是从属关系划分不明显。效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI5Nzc0NDc5_size_16_color_FFFFFF_t_70 1][]

我想接下来应该就是要你要的乡镇用工具抠出来了吧，我暂时也只能找到这种办法。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI5Nzc0NDc5_size_16_color_FFFFFF_t_70 2][]

**在网上找到的其他方法：**

第一种：能找到你需要的乡镇级地图边界的json数据，那就不用多说，直接引入就行了

第二种：找到乡镇级地图边界的shp文件，然后将shp文件转成json，在线网站https://mapshaper.org/，或者自己写代码转

第三种：找到乡镇级地图边界的kml文件，在通过kml文件转json，在线网站http://geojson.io/

第四种：1、(非专业)直接在网站http://geojson.io/上用工具画出图形，然后生成json。2、(专业点)根据乡镇扫描图然后通过ArcGIS软件画出乡镇，然后导出shp文件，在转json

如果以上四种你都满足不了，那么你就只有下载一个软件bigemap，上面可以直接下载乡镇级的shp或者kml数据，当然是收费的了。

[https_download.csdn.net_download_sinat_29774479_11504982]: https://download.csdn.net/download/sinat_29774479/11504982
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI5Nzc0NDc5_size_16_color_FFFFFF_t_70]: /images/20211104/2fa812f9f547432bab1e7e5cd372aaed.png
[https_download.csdn.net_download_sinat_29774479_11505044]: https://download.csdn.net/download/sinat_29774479/11505044
[http_geojson.io]: http://geojson.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI5Nzc0NDc5_size_16_color_FFFFFF_t_70 1]: /images/20211104/a26acca1220e4f80aab78c0105286500.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI5Nzc0NDc5_size_16_color_FFFFFF_t_70 2]: /images/20211104/3f72a42e7b6c419195d4877e01458449.png