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

happen 发布于2019-08-23 12:58 / 2794人阅读

摘要：广告开始最近做了表格数据转成图表展示的一个组件，地址如下整合地图的时候发现针对地级市的一些文件太多了，全部引入后有将近，所以就用了下高德老爷给的组件和接口，然后弄完在这记录一下虽然这种例子在社区里有很多这个组件文件放在了中，样式奇丑，请原谅

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

最近做了表格数据转成图表展示的一个react组件，地址如下：

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

整合地图的时候发现针对地级市的一些geoJSON文件太多了，全部引入后有将近20M，所以就用了下高德老爷给的组件和接口，然后弄完在这记录一下（虽然这种例子在echarts社区里有很多）

这个组件文件放在了 ./src/components/MapChart中，样式奇丑，请原谅

/——————广告结束——————/

需求

之前静态引入的geoJSON改为高德API获取

根据点击进行地图下钻

参考

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

依赖的高德脚本

http://webapi.amap.com/maps?v...

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

云服务器 GPU云服务器高德地图api接口高德地图api接口文档高德地图高德地图大数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99124.html

【echarts地图制作】下钻到乡镇/街道级别的

摘要：需求展示西安市各区县的地图，点击各区县下钻到各乡镇街道，只能内网环境使用，不可用通过百度高德地图来实现。利用展示自定义的地图关于具体如何导入格式数据到的方法，可以参考官方示例。需求展示西安市各区县的地图，点击各区县下钻到各乡镇/街道，只能内网环境使用，不可用通过百度/高德地图来实现。解决利用地图数据生成区域的geojson 网络上大部分地图数据只是到省市，最多到区县，再往下的数...

宠来也 2019-08-23 14:28 评论0 收藏0
VUE 记一次高德地图和Echarts（中国地图）

摘要：效果图准备工作高德地图申请安装中国地图高德地图官方点我进入创建动态创建标签后的是需要的插件中国地图安装开始使用创建组件写入需要的分布指数高低写入高德地图需要的效果图 showImg(https://user-gold-cdn.xitu.io/2019/5/24/16ae7a7f2f9cac45); 准备工作高德地图申请key 安装Echarts 中国地图高德地图官方API...

KoreyLee 2019-05-27 17:42 评论0 收藏0
vue中vuex,echarts,地图,ueditor的使用

摘要：获取富文本内容地图我是使用高德地图在全局导入为我申请的也可以自己去申请高德地图官网案例前言今天是个好日子,大家六一快乐;vue-cli生成的template还需要配置axios,vuex,element等插件,该项目中将这些常用插件进行了配置;项目开发中template可以快速复用,也是可以快速上手vue的一个demo; 1.动态效果图 showImg(https://segmen...

Cheriselalala 2019-08-26 11:56 评论0 收藏0
对web数据可视化的一些理解

摘要：本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。这也是数据可视化最麻烦的一直，一般我们借助的地图，或者百度地图，高德地图等来开发，其实百度地图也出了个地图可视化的库，展示效果没有好。。。。最近几年随着大数据的兴起，以及浏览器性能的提升，数据可视化成为了一个热点，前端也冒出来了很多数据可视化的岗位。本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。...

andong777 2019-08-20 16:28 评论0 收藏0