vue2版本用echarts实现地图下钻功能 注释详细cv可用

一、首先需要下载试图工具

  npm i echarts
  npm i echarts-gl

二、在使用地图页面中引入工具

import * as echarts from "echarts";
import "echarts-gl";

1、在data函数中定义一下地图下钻的历史记录

 // 地图下钻历史记录
 historyMapData: [{ name: "map", adcode: "100000" }],

2、初始化一个存放地图的dom

// 初始化dom
const myChart = echarts.init(document.getElementById("mapEchart"));

3、初始化一下地图

// 初始化map
this.initMap(myChart, "map", "100000");

4、给地图添加点击事件

 myChart.on("click", (e) => {
        if (e.value.level === "district")
          return (this.addressName = "暂无该地区数据无法渲染该地区");
        // 添加历史记录
        this.historyMapData.push(e.value);
        // 初始化地图
        this.initMap(myChart, newName, e.value.adcode);
      });

5、让可视化地图跟随浏览器大小改变

window.addEventListener("resize", () => {
  myChart.resize();
});

6、渲染下钻位置的地图

async initMap(chartDOM, geoName, adcode) {
      // 清除echarts实例
      chartDOM.clear();
      // 请求map的json
      const mapData = await this.getMapJSON(adcode, geoName);
      // 图表配置项
      const option = this.getOption(geoName, mapData);
      // 渲染配置
      chartDOM.setOption(option);
    },
    //获取中国地图区域编码
    async getMapJSON(adcode = "100000", geoName) {
      const res = await axios.get(
        `https://geo.json`
      );

      // 重新注册地图
      echarts.registerMap(geoName, res.data);
      // 过滤json数据
      const mapData = res.data.features.map((item) => {
        // console.log(item.properties.name);
        return {
          value: item.properties,
          name: item.properties.name,
        };
      });

      return mapData;
    },

7、重新注册地图配置地图样式

      // 重新注册地图
      echarts.registerMap(geoName, res.data);
      // 过滤json数据
      const mapData = res.data.features.map((item) => {
        // console.log(item.properties.name);
        return {
          value: item.properties,
          name: item.properties.name,
        };
      });

      return mapData;
    },
    getOption(geoName, mapData) {
      // 图表配置项
      const option = {
        geo3D: {
          zlevel: -100,
          show: false, //是否显示全部区域名称
          type: "map3D",
          center:{x: 0, y: 0},
          map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
          regionHeight: 2,
          shading: "realistic",
          realisticMaterial: {
            detailTexture: "./2.png", //初始地图图片
          },
          regions: [
            {
              name: mapData[0].name,
              itemStyle: {
                color: "#ff9900",
              },
            },
          ],
          //默认高亮区域
          emphasis: {
            label: { show: false },
            itemStyle: {
              color: "transparent",
            },
          },
        },
        series: [
          {
            zlevel: -10,
            regionHeight: 4,
            type: "map3D",
            boxWidth: 110,
            boxHeight: 10,
            boxDepth:90,
            top:10,
            bottom:10,
            viewControl: {
              center: [0,10,0],
              panSensitivity: 0,
              rotateSensitivity: 0,
              minAlpha: 80,
              minBeta: 0,
            },
            map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
            data: mapData, //这里比较重要 获得过滤后的data，这样点击事件时就能获得这个data的值
            label: {
              show: false, // 是否显示标签。
              textStyle: {
                color: "#fff", // 地图初始化区域字体颜色
                fontSize: 12,
              },
              formatter: (e) => {
                // console.log(e.name);
                return ` ${e.name} `;
              },
            },
            shading: "realistic",
            realisticMaterial: {
              detailTexture: "./2.png",
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "rgba(20, 123, 200, 0.1)", //区域边界线颜色
              color: "rgba(0, 120, 255, 0.4)",
            },
            emphasis: {
              label: {
                show: true, //鼠标划过或停留是否现在区域名称
                textStyle: {
                  color: "#fff", //鼠标划过或停留的字体颜色
                },
              },
              itemStyle: {
                color: "#fff", //鼠标划过或停留的区域颜色
              },
            },
          },
        ],
      };
      return option;
    },

8、返回上级   

 backMap() {
      const myChart = echarts.init(document.getElementById("mapEchart"));
      // 去除当前的地图信息
      this.historyMapData.pop();
      const len = this.historyMapData.length;
      // 获取上一级的地图信息
      const newdata = this.historyMapData[len - 1];
      // 重新渲染地图
      this.initMap(
        myChart,
        newdata?.name || "map",
        newdata?.adcode || "100000"
      );
    },