[前端技巧]基于 Echarts+AMap 点击地图级联下钻

基于 Echarts+AMap 点击地图级联下钻

原文链接： 基于 Echarts+AMap 点击地图级联下钻

echarts-map 基于echarts+amap获取地图行政区边界实现下钻。提供了常见的分布图、热力图、散点图及综合地图。可应用于一些可视化大数据 平台。

快速安装 克隆项目

git clone https://github.com/biubiubiu01/EchartsMap.git

进入目录

cd EchartsMap

安装依赖

npm install

本地构建

npm run dev

渲染步骤
根据行政区code去获取行政区边界geoJson
首先引入地图。

<script src='http://webapi.amap.com/maps?v=1.3&key='你申请的key'&plugin=AMap.DistrictSearch'></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>

通过AMapUI的DistrictExplorer 方法去获取行政区geoJson。

https://lbs.amap.com/api/amap-ui/reference-amap-ui/geo/district-explorer

获取地图数据
渲染echarts图
点击地图级联下钻

最后附上一个全国GeoJSON获取地址。

http://datav.aliyun.com/tools/atlas/

预览地址

https://gist006.gitee.io/echartsmap/

echarts社区

https://gallery.echartsjs.com/explore.html?u=bd-4240785066

仓库地址

https://github.com/biubiubiu01/EchartsMap