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

2018-11-09 admin

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

最近做了表格数据转成图表展示的一个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了

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

原文链接:https://segmentfault.com/a/1190000016953346

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44912.html

文章标题:echarts结合高德API进行地图下钻

相关文章
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Javascript实现数组中的元素上下移动
交换数组可以实现元素上下移动了,这个效果我们在表格或以前排序算法中都会用到,下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候,要实现一个数组记录上下移动的示例。写起来也没有没麻烦,无非是交换数组元素。最终实现代...
2017-05-02
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $(&#x...
2017-02-17
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Windows系统下使用Sublime搭建nodejs环境
1.下载nodejs,并安装ok后,配置好环境变量。 2.下载sublime text3 3.在package install 包中新增node插件(或者直接去SublimeText-Nodejs插件(https://github.com/...
2017-03-22
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
回到顶部