前言

点击地图进入下一个行政区域（从省到市到区），是一个很常见的需求。这里使用高德地图的数据，echarts来实现。

一、实现效果

二、地图数据下载

地图选择器：datav团队基于高德数据开发的，可调用地图数据，也可下载GeoJson格式数据 datav.aliyun.com/tools/atlas…

一键打包下载(这是一个博主自己开发的打包工具)：blog.csdn.net/t6546545/ar…

三、思路

通过echarts.registerMap(mapName,mapData)注册可用的地图
在series中通过type: "map",map:mapName来调用地图
监听地图的点击事件，当点击时销毁当前echarts实例，并重新调用绘图方法

四、开发

创建一个文件夹，然后创建geoAtlasJson.js和index.html两个文件

1. geoAtlasJson.js

用来存放区域名称与城市编码的对应关系，可到高德下载 lbs.amap.com/api/webserv…

geoAtlasJson.js中的对应关系，个别名字可能有些出入，当发现地图点击不了时，可根据上面高德上下载的Excel文件中找到对应的数据

2. index.html

文件直接用浏览器打开就可查看效果，代码中含有注释

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts 3d map</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .echarts-map {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div class="echarts-map" id="3dMap"></div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <script src="./geoAtlasJson.js"></script>
  <script>
    //保存echarts实例
    let mapEcharts = null;

    //初次加载中国地图
    //第一个参数:城市编码(中国地图为100000)，第二个参数:是否第一次加载，第一次加载传false
    loadMap(100000, false);

    //请求地图数据
    function loadMap(areaCode, notFirstLoad = true) {
      fetch(`https://geo.datav.aliyun.com/areas_v3/bound/${areaCode}_full.json`)
        .then((res) => res.json())
        .then((res) => {
          //第一次加载，不需要注销实例
          if (notFirstLoad) {
            //注销实例
            echarts.dispose(mapEcharts);
          }
          //初始化
          initMap(areaCode, res);
        })
        .catch((err) => {
          alert("最多到县/区");
        });
    }

    // 地图初始化
    function initMap(mapName, mapData) {
      mapEcharts = echarts.init(document.getElementById("3dMap"));
      // 注册地图
      echarts.registerMap(mapName, mapData);

      // 配置项
      let options = {
        series: [
          {
            name: "map",
            type: "map", // 地图
            map: mapName, // 加载注册的地图
            roam: true, // 鼠标事件
            data: [], //{name,value} 业务数据
          },
        ],
      };
      mapEcharts.setOption(options);
      mapEcharts.on("click", (params) => {
        //通过城市名称找到对应城市编码
        const item = allAreaCode.find((i) => i.name === params.name);
        if (item) {
          loadMap(item.code);
        }
      });
    }
  </script>
</html>

五、最后

地图选择器datav中的数据请求地址在开发服务器上会返回403，即使使用代理也不行，所以这里没有启动开发服务器，直接在index.html中开发。

在实际开发中，可将数据下载下来，然后去访问本地资源。在云在前端公众号中发送drill领取源码地址

你的点赞，是我下一次创作的动力；码字不易，点赞支持！！！

参考文章：juejin.cn/post/699460…

echarts地图实现点击进入下一级行政区（地图钻取）

前言