原文链接: 基于 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