Echarts_map(一) 使用echarts地圖的要點整理

Echarts_map(一) 使用echarts地圖的要點整理

---

前言

背景

近段時間,大量的接觸echarts,整理一下知識點,鞏固學習;

Echarts 相關鏈接

Echarts官方文檔
Echarts社區

Echarts_map使用要點

• GeoJson的使用;
• option-geo的使用;
• option-#series
  • map 地圖基礎,數值對應地圖
  • lines 地圖軌跡線
  • scatter 地圖標註點
  • effectScatter 地圖閃動標註點
• 不同地圖GeoJson對應的nameMap;
• 數據處理函數;
• 點擊交互事件(地圖下鑽);
• 百度地圖爲底圖的echarts;
• 3D地圖-WEB GL;

入門

最簡單的江蘇地圖

$.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);
})

代碼備註:

• #1 json/jsGeoJson/jiangsu.json 讀取江蘇地圖的GeoJson; (下面內容會相對詳細的介紹GeoJson);
• #2 在echarts中註冊名爲江蘇的地圖名稱,和#3:series[0].mapType 對應;
• #4 series[0].data主要存放每個行政區對應的值其中name屬性對應GeoJson中#6:features[].properties.name
• #5 很多時候數據庫存儲的行政區名稱和GeoJson的行政區名稱不一樣,例如南京市和南京,US和美國等等,nameMap就是解決這個問題的方法之一,也可以在數據處理的函數,直接改後端傳來的數據(讓後端改好傳過來?也行吧);

GeoJson

GeoJSON是一種對各種地理數據結構進行編碼的格式，基於Javascript對象表示法的地理空間信息數據交換格式。

我們常用的GeoJSON實際是描述行政區邊界的json,實際上本來echarts是提供對應的json,後來百度官方下了,我們只能自己蒐集相關json文件了;

下面是最簡單的GeoJSON

{
  "type": "FeatureCollection",
  "features": [
        {
        	"type": "Feature",
        	"properties": {
        		"name": "行政區名稱",//#6
        		"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]
        				]
        			]
        		]
        	}
        }
    ]
}