echarts结合高德API进行地图下钻

2024年1月13日 326次阅读 来源: yurt

/——————广告开始——————/

最近做了表格数据转成图表展示的一个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绘不出来，才决定用高德提供的组件去获取

    原文作者：yurt
    原文地址: https://segmentfault.com/a/1190000016953346
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞