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;