Echarts_map(二) GeoJSON的使用,下载,绘制和修改

GeoJson的下载

echarts官方不维护数据之后,可以在gallery社区
下载相关的json;当然网络上仔细找找也可以找到。

普遍来讲，筛选地图之后选一个项目进去之后,F12>NetWork>F5打开控制台,选择network刷新一下,筛选XHR,如下图,直接下载这个json文件就可以使用了。

还有一种写法，如下图，把json和注册registerMap地图的代码写在一起,合并为一个js,使用的时候要注意引用js后,在option.series[0].map和注册时的名称相同就可以使用了

最后热心的网友提供了很多最新GeoJson代码的项目
★★推荐这个实时获取最新geojson数据 项目,可以下载指定行政区的GeoJson;

核心思想是利用百度地图Javascript API中new BMap.Boundary()接口获得最新的GeoJson，然后提供下载，可以参考百度地图api-添加行政区划

这个项目也是真的可以获取最新的可以下钻到县级的GeoJson文件。

推荐去该作者的github-echarts-map-demo学习参考。

GeoJson的使用

将json数据加载到echarts中,就可以直接使用;

//直接读取json文件的数据,然后加载到echarts中
$.getJSON("json/jsGeoJson/jiangsu.json", function(geoJson) {//#1
	echarts.registerMap('江苏', geoJson);//#2
	let option = {
		series: [
			{
				name: '江苏地图',
				type: 'map',
				mapType: '江苏',//#3
				itemStyle:{
				    normal:{label:{show:true}},
				    emphasis:{label:{show:true}}
				},
				data:[{name: '南京', value: 100}],//#4
				nameMap: {'南京市': '南京'}//#5
			}
		]
	}
	mapChart.setOption(option);
})

GeoJson的制作

手写geojson

简单了解下geojson的格式,就可以直接手写json了,geojson将所有的地理要素分为:

• Point 点要素;
• MultiPoint 多点要素;
• LineString 线要素;
• MultiLineString 多线要素;
• Polygon 多边形要素;
• MultiPolygon 多个多边形;
• GeometryCollection 综合的地理要素集合;

首先是将这些要素封装到单个的geometry里，然后作为一个个的Feature（要素）放到一个要素集合里，
从树状结构来理解FeatureCollection就是根节点;表示为：

{
  "type": "FeatureCollection",
  "features": [{},{}]
}

下面是最简单的GeoJSON:

{
  "type": "FeatureCollection",
  "features": [
        {
        	"type": "Feature",
        	"properties": {
        		"name": "名称",
        		"id": "ID"
        	},
        	"geometry": {
        		"type": "MultiPolygon",
        		"coordinates": [
        			[
        				[
        					[119.917345, 31.753843],
        					[119.891998320313, 31.7478542304688],
        					[119.853077421875, 31.7734767890625],
        					[119.867345, 31.833843],
        					[119.873985625, 31.8372023750001],
        					[119.881422148438, 31.851899640625],
        					[119.91062625, 31.83712425],
        					[119.925201445313, 31.8083132148438],
        					[119.947345, 31.803843],
        					[119.959268828125, 31.7798561835938],
        					[119.920704375, 31.760483625],
        					[119.917345, 31.753843]
        				]
        			]
        		]
        	}
        }
    ]
}

在线制作

在线制作可以使用http://geojson.io/这个网站,在线绘制GeoJson,然后save下来就可以使用了

非常推荐在线自己试试这个网站的使用，上文提到的几种要素都可以试一下，配合百度地图api的覆盖物会更好理解这些内容,配合行政区的GeoJson,可以添加特殊的区域覆盖物,例如经济开发区,经贸区等等。

相关系列 (陆续更新)

• GeoJson的使用;
• option-geo的使用;
• option-#series
  • map 地图基础,数值对应地图
  • lines 地图轨迹线
  • scatter 地图标注点
  • effectScatter 地图闪动标注点
• 不同地图GeoJson对应的nameMap;
• 数据处理函数;
• 点击交互事件(地图下钻);
• 百度地图为底图的echarts;
• 3D地图-WEB GL;