echarts画市县乡镇级地图

最新推荐文章于 2024-09-06 09:30:00 发布

古柏树下

最新推荐文章于 2024-09-06 09:30:00 发布

阅读量1.1w

点赞数 8

分类专栏： Echarts 文章标签： echarts geojson 市县地图

本文链接：https://blog.csdn.net/sinat_29774479/article/details/98962699

版权

Echarts 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

首先描述一下原理，

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

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

附上浙江省所有市的GeoJSON

https://download.csdn.net/download/sinat_29774479/11504982

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

代码如下

<!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，然后导入到http://geojson.io中。我下载到的版本中，确实有划分了乡镇街道的划分，但是从属关系划分不明显。效果如下：