geoJson 数据太旧导致地图下钻断档用 ECharts 四级联动 5 分钟跑通省到乡镇的完整方案【免费下载链接】echarts-map-demo适用于echarts、QGIS等地图geoJson行政区划边界数据的实时获取与应用json格式数据全国省市区县多级联动下钻真正意义的下钻至县级【附最新全国省市区县乡镇三级或四级城市geoJson文件下载另可下载四级联动或五级村级行政编码对应关系】项目地址: https://gitcode.com/GitHub_Trending/ec/echarts-map-demo做 ECharts 地图下钻时卡住你的往往不是图表配置而是 geoJson 行政区划边界数据本身网上流传的文件年代久远区县早已重新划分钻到市级就再也下不去一层。echarts-map-demo 正是冲着这个痛点来的它通过高德地图 API 实时拉取全国省市区县乡镇边界用 ECharts 渲染出可点击逐层下钻的地图支持一次性打包下载 geoJson 文件并附带四级联动或五级村级行政编码对应关系把数据过期这件事从根上解决掉。️ 先看它解决了什么问题传统做法是下载一份全国 geoJson 存本地但行政区划每年都在调整数据过期后地图上的区划名称和实际对不上。这个项目换了条路边界数据走高德AMap.DistrictSearchDistrictExplorer接口实时获取不依赖静态文件点击地图任意区域即可下钻省 → 市 → 区县 → 乡镇逐层深入真正下钻至县级而不是止步于市左侧表单可筛选省市区支持按名称、按行政编码或一次性打包下载全部 geoJson 文件仓库根目录还附带了一份现成的数据资源可直接取用。⚡ 5 分钟跑通本地演示依赖是 Vue 2 echarts 4 的老组合clone 下来装完依赖就能起服务git clone https://gitcode.com/GitHub_Trending/ec/echarts-map-demo cd echarts-map-demo npm install npm run serve跑通后打开本地地址左边是高德底图加省市区三级联动下拉框右边是 ECharts 渲染的下钻地图左上角还能看到正在下载 geoJson 数据的进度提示——这就是整个项目的核心交互。注意一点页面调用的是高德 JS API正式使用前需要换成自己申请的 key接口配额和调用归属才合规。 关键源码导读想读懂下钻逻辑看两个文件就够了src/App.vue核心都在这个文件里。它实例化高德地图、初始化 echarts、注册registerMap注入边界数据并通过this.echartsMap.on(click)监听点击事件触发下一层查询打包下载用的 JSZip 和 8 线程并发加载也在其中src/MapRange.vue查询表单与下载方式选择组件通过change和click事件把操作抛回父组件。不需要实时接口时仓库根目录的 全国省市区geoJson数据包.zip 提供了现成的省市区县 geoJson 文件解压后可直接喂给registerMap使用。 落地能用到哪里这套实时边界 多级下钻的组合典型场景是大数据展示类项目区域销售分布、运营指标监控、疫情或舆情态势屏都可以直接复用它的下钻链路再把自己业务数据按 adcode 关联到mapData里渲染成色块。别再用三年前的 geoJson 硬撑了——把 demo 跑起来对照 src/App.vue 里的下钻链路改上自己的数据你的地图就能从省级一路钻到乡镇级。【免费下载链接】echarts-map-demo适用于echarts、QGIS等地图geoJson行政区划边界数据的实时获取与应用json格式数据全国省市区县多级联动下钻真正意义的下钻至县级【附最新全国省市区县乡镇三级或四级城市geoJson文件下载另可下载四级联动或五级村级行政编码对应关系】项目地址: https://gitcode.com/GitHub_Trending/ec/echarts-map-demo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考