vue3+Ts+echarts实现3D地图下钻 注释详细cv可用

一、下载可视化视图工具

npm i echarts

npm i echarts-gl

二、引入工具

import * as echarts from 'echarts';
import 'echarts-gl';
import {onMounted,ref} from 'vue';
import axios from 'axios';

三、定义chartMap方法

const chartMap = async () => {
  // 初始化dom
  const myChart = echarts.init(
    <HTMLElement>document.getElementById("mapEchart")
  );
  // 初始化map
  initMap(myChart, "map", "100000");
  // 添加点击事件
  myChart.on("click", (e: any) => {
    console.log(e);
    const newName: string = e.name;
    if (e.value.level === "district") return alert("该地区已经无法下钻");
    // 添加历史记录
    historyMapData.value.push(e.value);
    // 初始化地图
    initMap(myChart, newName, e.value.adcode);
  });
  //让可视化地图跟随浏览器大小缩放
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};

四、初始化图表 定义数据类型

const initMap = async (
  chartDOM: echarts.ECharts,
  geoName: string,
  adcode: string
) => {
  // 清除echarts实例
  chartDOM.clear();
  // 请求map的json
  const mapData = await getMapJSON(adcode, geoName);
  // 图表配置项
  const option = getOption(geoName, mapData);
  // 渲染配置
  chartDOM.setOption(option);
};

五、获取JSON数据 

 async getMapJSON(address, geoName, id) {
      let res = null;
      if (address == undefined) {
        return null;
      }
      if (this.district === "district") {
        res = await axios.get(
          `https://geo.datav.aliyun.com/areas_v2/bound/${address}.json`
        );
      } else if (this.district !== "district") {
        res = await axios.get(
          `https://geo.datav.aliyun.com/areas_v2/bound/${address}_full.json`
        );
      }
      // 重新注册地图
      echarts.registerMap(geoName, res.data);
      // 过滤json数据
      // 去掉台湾合海南岛
      if (
        res.data.features[20] &&
        res.data.features[20].properties.adcode == "460000"
      ) {
        res.data.features[20].geometry.coordinates.splice(1);
      }
      if (
        res.data.features[34] &&
        res.data.features[34].properties.adcode == "100000"
      ) {
        res.data.features[34].geometry.coordinates.splice(0);
      }
      const mapData = res.data.features.map((item) => {
        return {
          value: item.properties,
          name: item.properties.name,
        };
      });
      return mapData;
    },

六、图表配置

const getOption = (geoName: string, mapData: any) => {
  // 图表配置项
  const option = {
    geo3D: {
      zlevel: -100,
      show: true,
      map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
      regionHeight: 2,
      shading: "realistic",
      realisticMaterial: {
        detailTexture: "./1.png",
      },
      itemStyle: {
        borderWidth: 1.5,
        borderColor: "#5FB9DA",
        color: "#6597D0",
        opacity: 1,
      },
      label: {
        show: true, // 是否显示标签。
        textStyle: {
          color: "#fff", // 地图初始化区域字体颜色
          fontSize: 40,
        },
        formatter: (e: any) => {
          return ` ${e.name} `;
        },
      },
    },
    series: [
      {
        zlevel: -10,
        regionHeight: 2,
        type: "map3D",
        map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
        data: mapData, //这里比较重要：获得过滤后的data，这样点击事件时就能获得这个data的值
        emphasis: {
          label: { show: false },
          itemStyle: {
            color: "transparent",
          },
        },
        shading: "realistic",
        realisticMaterial: {
          detailTexture: "./4.png",
          textureTiling: 2,
        },
        itemStyle: {
          color: "transparent",
        },
      },
    ],
  };
  return option;
};

七、返回上级

type HistoryData = {
  name: string;
  adcode: string | undefined;
};
// 地图下钻历史记录
const historyMapData = ref<HistoryData[]>([{ name: "map", adcode: "100000" }]);
// 返回上级地图
const backMap = () => {
  const myChart = echarts.init(
    <HTMLElement>document.getElementById("mapEchart")
  );
  // 去除当前的地图信息
  historyMapData.value.pop();
  const len = historyMapData.value.length;
  // 获取上一级的地图信息
  const newdata = historyMapData.value[len - 1];
  // 重新渲染地图
  initMap(myChart, newdata?.name || "map", newdata?.adcode || "100000");
};