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

GraceOscar 发布于9天前 阅读103次
0 条评论

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

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

查看原文: echarts结合高德API进行地图下钻

  • greendog
  • yellowcat
  • smallladybug
  • brownmeercat
  • greenlion
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。