基于 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