echarts画市县乡镇级地图

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中。我下载到的版本中,确实有划分了乡镇街道的划分,但是从属关系划分不明显。效果如下:

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

在网上找到的其他方法:

第一种:能找到你需要的乡镇级地图边界的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数据,当然是收费的了。

  • 5
    点赞
  • 0
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
function getGzMap(_data) { if (_chinaMap == undefined) { var dom = document.getElementById("container"); _chinaMap = echarts.init(dom); _chinaMap.on('click', function(params) { console.log(params); var _type = params.seriesType; if (_type == "map") { //window.parent.aaa('aa') //调用父页面方法 } else if (_type == "effectScatter") { window.parent.showMap(); } }) } var option = { backgroundColor: 'rgba(0,0,0,0)', visualMap: { type: 'piecewise', show: false, min: 0, max: 300, splitNumber: 3, itemWidth: 10, itemHeight: 10, itemGap: 5, seriesIndex: [1], pieces: [ { min: 0, max: 100, label: '优' }, { min: 101, max: 200, label: '良' }, { min: 201, max: 300, label: '高风险' } ], //color: ['#FA4D08', '#4BD94F', '#FBD32B'], //红、绿、黄 color: ['#F8DAE6', '#FEF9B5', '#B0D8B3'], //红、黄、绿 textStyle: { color: '#9EA8B1', fontSize: 10 } }, tooltip: { formatter: '{b}' }, geo: { map: 'guangdong', roam: true, aspectScale: 1, zoom: 1.5, layoutCenter: ['55%', '40%'], layoutSize: 500, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111', borderColor: '#3BB4DF', shadowColor: '#25A3FC', shadowBlur: 10 }, emphasis: { areaColor: '#ddb926' } } }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', data: unitData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/fire.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, { name: '', type: 'map', geoIndex: 0, mapType: 'guangdong', // 自定义扩展图表类型 label: { normal: { show: true, } }, itemStyle: { normal: { label: { show: true, fontSize: 10, color: '#111' }, shadowColor: '#ddb926', shadowBlur: 5, }, emphasis: { label: { show: true }, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 } }, data: _data }, { type: 'effectScatter', coordinateSystem: 'geo', data: windData, symbolSize: 10, symbol: 'image://../../../../Content/images/One/wind.png', //symbolRotate: 35, rippleEffect: { period: 4, scale: 5, brushType: 'fill', }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#fff' } } }, ] }; $.getJSON('../../MapCN/guangdong.json', function(chinaJson) { echarts.registerMap('guangdong', chinaJson); _chinaMap.setOption(option, true); }); }
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页

打赏

古柏树下

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值