地图下钻

--- theme: qklhk-chocolate --- # 🗺️ 什么是地图下钻? 地图下钻就是深入层级,比如你当前地图上面显示了全国范围的行政区,这时候点击了一个行政区,地图就变成这个行政区的样子. 就像下面 ![image-20250721204810478](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e52f8cd69c7f404a8a906b4616cf8490~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1768719625&x-signature=LBmDLJbA1NNz1ddrrQxCHCvz1u8%3D) # 💡 实现思路 1. 初始化地图 * 页面加载时，初始化 ECharts 实例，默认显示全国地图 2. 获取地图数据 * 根据对应的行政区编码获取地图数据 3. 渲染地图 * 使用 echarts.registerMap 注册当前区域地图。 4. 编写下钻逻辑 * 监听地图点击事件，获取被点击区域的行政区代码和名称。 5. 获取到`geojson`后重新注册地图和更新`Echarts` ![image-20250721205902882](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0eb171bc30bc4cd99f89e29e2384dd19~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1768719625&x-signature=nvgnURbNryUxIRkWUgCHIXkny6M%3D) # 📊 数据来源 **DataV地址**:[DataV.GeoAtlas地理小工具系列](https://datav.aliyun.com/portal/school/atlas/area_selector?spm=a2crr.23498931.0.0.328315dd1YcTmR) > 地图的geo数据是从`dataV`里面获取的 ![image-20250721211702881](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2eba30786e58438b80159c07e2301a05~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1768719625&x-signature=%2FJOU%2FfQ5dCRn4Y8wlKtJA9n%2BLiA%3D) ![image-20250721211746997](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/11741cd467854e4094f4a969a67254ee~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1768719625&x-signature=L%2Fmpiw%2F3t6l4qT1diws5epCQhco%3D) 这串数字就是我们的行政区代码,我只要修改行政区代码,就可以获取到不同行政区的`geojson`数据通过观察请求回来的json数据可以发现,每个行政区都会带它的编码,这样就很方便了,只要每次点击地图的时候,把对应地块的行政区代码获取到,再重新请求即可. ![image-20250721211855859](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fdff5bcf922640c3875333291c3a1c8f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1768719625&x-signature=xywSr1dRs0v7%2Fipvs0r0Ko9b7CQ%3D) # ✨ 最终效果 ![最终效果.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ef47ed56108f4f3c8a48ad6a10eb227f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6buR5b-D55qu6JuL:q75.awebp?rk3s=f64ab15b&x-expires=1768719625&x-signature=WbykIDC10GubDz%2FUOTxIzE1MXow%3D) # 💻 完整代码 ```html 地图下钻

``` # 过渡动画的实现地图切换的过渡动画放在这篇文章里面 [echarts5实现地图过渡动画](https://juejin.cn/post/7533853983913164835)