/——————廣告開始——————/
最近做了表格數據轉成圖表展示的一個react組件，地址如下：
https://github.com/LylaYuKako...
整合地圖的時候發現針對地級市的一些geoJSON文件太多了，全部引入後有將近20M，所以就用了下高德老爺給的組件和接口，然後弄完在這記錄一下（雖然這種例子在echarts社區裏有很多）
這個組件文件放在了 ./src/components/MapChart中，樣式奇醜，請原諒
/——————廣告結束——————/
需求
- 之前靜態引入的geoJSON改爲高德API獲取
- 根據點擊進行地圖下鑽
參考
http://gallery.echartsjs.com/editor.html?c=xr1IEt3r4Q
依賴的高德腳本
注意引入ui腳本要在maps引入之後
使用到的高德組件和接口
1. AMapUI.loadUI 方法以及 DistrictExplorer 實例
利用 AMapUI.loadUI 可以構造一個創建一個 DistrictExplorer 實例，然後利用 DistrictExplorer 的實例，可以根據當前需要加載城市的 adcode 獲取到該城市的 geo 數據
代碼如下
let districtExplorer
window.AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
/**
* DistrictExplorer構建的實例
*/
districtExplorer = new DistrictExplorer()
})// 執行在上一步districtExplorer構造完成之後
const adcode = '10000' // 這個adcode是城市（國家省市區）的編號
districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
const geoData = {}
// areaNode對象執行這個方法返回的geoJSON中的features
geoData.features = areaNode.getSubFeatures()
echarts.registerMap(this.adcode, this.geoData)
})這樣就可以動態獲取城市對應的geoJSON了
2. https://restapi.amap.com/v3/c... 接口獲取城市adcode
上邊提到的adcode，原本也是一個靜態的json文件，本着要高德就高德到底的原則，這塊使用 https://restapi.amap.com/v3/c... 這個接口來根據城市名稱獲取到城市adcode，
具體的使用方法請參考：https://lbs.amap.com/api/webs...
總結
這塊還是遇到了一些小問題，所以在這記錄一下，echarts地圖之前提供的geoJSON在echarts官網上指出不符合測繪法，然後給了一個示例鏈接，然而鏈接點進去的例子我沒能看懂，所以看了一堆社區的例子，然後嘗試了直接利用 https://restapi.amap.com/v3/c... 獲取的城市信息去拼geoJSON的話，echarts繪不出來，才決定用高德提供的組件去獲取