echarts結合高德API進行地圖下鑽

/——————廣告開始——————/

最近作了表格數據轉成圖表展現的一個react組件，地址以下：

https://github.com/LylaYuKako...

整合地圖的時候發現針對地級市的一些geoJSON文件太多了，所有引入後有將近20M，因此就用了下高德老爺給的組件和接口，而後弄完在這記錄一下（雖然這種例子在echarts社區裏有不少）

這個組件文件放在了 ./src/components/MapChart中，樣式奇醜，請原諒

/——————廣告結束——————/

需求

1. 以前靜態引入的geoJSON改成高德API獲取
2. 根據點擊進行地圖下鑽

參考

http://gallery.echartsjs.com/editor.html?c=xr1IEt3r4Q

依賴的高德腳本

1. http://webapi.amap.com/maps?v...
2. http://webapi.amap.com/ui/1.0...

注意引入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繪不出來，才決定用高德提供的組件去獲取