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绘不出来，才决定用高德提供的组件去获取