Vue3中Echarts结合高德地图API渲染中国地图及省级区域地图

一、定义MapHook

import "@amap/amap-jsapi-types";
import AMapLoader from "@amap/amap-jsapi-loader";

export const useMapHook = async () => {
  // 高德地图安全码
  window._AMapSecurityConfig = {
    securityJsCode: "xxxxxxxxxxxxxxxxxxxxxx"
  };
  // 高德加载
  const AMapLoad = async () => {
    window.AMap = await AMapLoader.load({
      key: "xxxxxxxxxxxxxx",
      version: "2.0",
      plugins: ["AMap.DistrictSearch", "AMap.AutoComplete", "AMap.Geocoder"]
    });
  };

  const loadAMapUI = () => {
    return new Promise<void>((resolve, reject) => {
      if (window.AMapUI) {
        resolve();
        return;
      }

      const script = document.createElement("script");
      script.src = "https://webapi.amap.com/ui/1.1/main.js";
      script.onload = () => resolve();
      script.onerror = () => reject("AMapUI 加载失败");
      document.head.appendChild(script);
    });
  };

  await AMapLoad();
  await loadAMapUI();
};

二、在.vue文件中使用

declare global {
  interface Window {
    AMapUI: any;
  }
}
import { useMapHook } from "@/utils/map";
import * as echarts from "echarts";
const opts = ref<any>({
  subdistrict: 1,
  showbiz: false
});
const district = new AMap.DistrictSearch(opts.value);

三、 定义初始化地图

const initProvinceMap = () => {
  district.search("中国", (status, result: any) => {
    console.log("statusstatus", status, result);
    if (status == "complete") {
      getData(result.districtList[0], "", result.districtList[0].adcode);
    }
  });
};

四、函数解析

const getData = (data: any, level: any, adcode: any) => {
  var subList = data.districtList;
  if (subList) {
    var curlevel = subList[0].level;
    if (curlevel === "street") {
      //为了配合echarts地图区县名称显示正常，这边街道级别数据需要特殊处理
      let mapJsonList = geoJsonData.value.features;
      let mapJson: any = {};
      for (let i in mapJsonList) {
        if (mapJsonList[i].properties.name == Provice.value) {
          mapJson.features = [].concat(mapJsonList[i]);
        }
      }
      mapData.value = [];
      //这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
      mapData.value.push({
        name: Provice.value,
        value: Math.random() * 100,
        level: curlevel
      });
      loadMap(Provice.value, mapJson);
      geoJsonData.value = mapJson;
      return;
    }

    //街道级以上的数据处理方式
    mapData.value = [];
    for (var i = 0, l = subList.length; i < l; i++) {
      var name = subList[i].name;
      var cityCode = subList[i].adcode;
      //这个mapData里包含每个区域的code、名称、对应的等级，实现第三步功能时能用上
      mapData.value.push({
        name: name,
        value: Math.random() * 100,
        cityCode: cityCode,
        level: curlevel
      });
    }
    loadMapData(adcode);
  }
};

const loadMapData = async areaCode => {
  await useMapHook();
  window.AMapUI.loadUI(["geo/DistrictExplorer"], DistrictExplorer => {
    //创建一个实例
    var districtExplorer = new DistrictExplorer();
    districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
      if (error) {
        console.error(error);
        return;
      }
      let mapJson: any = {};
      //特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
      mapJson.features = areaNode.getSubFeatures();
      loadMap(Provice.value, mapJson);
    });
  });
};

const loadMap = async (mapName: string, data: any) => {
  if (data) {
    await initData(); //获取地图地标渲染数据
    await mapEcharts(mapName, data); //渲染地图
  }
};

 

const mapEcharts = (mapName, data) => {
  echarts.registerMap(mapName, data);
  const map = document.getElementById("Chinamap");
  if (!map) return;
  let existingInstance = echarts.getInstanceByDom(map);
  if (existingInstance) {
    existingInstance.dispose();
  }
  const myChartmap = echarts.init(map);
  let markImg = "image://" + baseBg; //地标背景图
  //设置配置项
  myChartmap.setOption({
    geo: [
      {
        map: mapName,
        roam: false, //鼠标缩放
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
        layoutCenter: ["50%", "50%"], // 地图居中
        layoutSize: "100%",
        // 地图文字设置
        label: {
          show: true,
          color: "#a2abc3",
          fontSize: 12
        },
        itemStyle: {
          color:
            // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              // 渐变效果
              colorStops: [
                {
                  offset: 0,
                  color: "#0a286e" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#093f86" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            },
          // 边框设置样式
          borderColor: "#316d90",
          borderWidth: 2,
          shadowColor: "rgba(8, 123, 184, 0.5)",
          shadowBlur: 20
        },
        //   地图高亮效果
        emphasis: {
          itemStyle: {
            color: "#04648f"
          },
          label: {
            color: "#ffffff"
          }
        }
      },
      //重影
      {
        type: "map",
        map: mapName,
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
        zlevel: -1,
        layoutCenter: ["50%", "50%"], // 地图居中
        layoutSize: "102%",
        roam: false,
        silent: true,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            // 渐变效果
            colorStops: [
              {
                offset: 0,
                color: "#067cb7" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#07236d" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          // 边框设置样式
          borderColor: "#61deff",
          borderWidth: 4,
          shadowColor: "rgba(8, 123, 184, 0.5)",
          shadowBlur: 20
        }
      },
      {
        type: "map",
        map: mapName,
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
        zlevel: -2,
        layoutCenter: ["50%", "51%"], // 地图居中
        layoutSize: "103%",
        roam: false,
        silent: true,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            // 渐变效果
            colorStops: [
              {
                offset: 0,
                color: "#067cb7" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#07236d" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          // 边框设置样式
          borderColor: "#1990c9",
          borderWidth: 1,
          shadowColor: "rgba(8, 123, 184, 0.5)",
          shadowBlur: 20
        }
      },
      {
        type: "map",
        map: mapName,
        left: 0,
        top: 0,
        bottom: 0,
        right: 0,
        zlevel: -3,
        layoutCenter: ["50%", "52%"], // 地图居中
        layoutSize: "104%",
        roam: false,
        silent: true,
        itemStyle: {
          borderWidth: 5,
          borderColor: "rgba(5,9,57,0.8)",
          shadowColor: "rgba(29, 111, 165,0.8)",
          shadowOffsetY: 15,
          shadowBlur: 10,
          areaColor: "rgba(5,21,35,0.1)"
        }
      }
    ],
    series: [
      // 富文本标签
      {
        type: "scatter",
        coordinateSystem: "geo",
        itemStyle: {
          borderColor: "rgba(22, 231, 218,0.8)",
          borderWidth: 1,
          opacity: 1
        },
        label: {
          show: true,
          position: [25, -10],
          opacity: 1, // 确保不透明
          formatter: params => {
            return `{a|${params.data.num}}{b|${params.data.name}}`;
          },
          backgroundColor: "#0099ff",
          borderRadius: 2,
          rich: {
            a: {
              color: "#fff",
              fontSize: 18,
              fontWeight: "bold",
              align: "center",
              padding: [4, 8],
              backgroundColor: "#0062eb",
              borderRadius: 2
            },
            b: {
              color: "#fff",
              fontSize: 12,
              align: "center",
              padding: [4, 8],
              borderRadius: 2
            }
          }
        },
        symbol: markImg,
        opacity: 1,
        symbolSize: [40, 70],
        symbolOffset: [0, -35], // 向上偏移图片高度的一半
        data: EchartsData.value //地标数据
        /* silent: true */
      }
    ]
  });
  // 监听点击事件
  myChartmap.on("click", function (params) {
    console.log("params", params);
    if (params.componentType === "geo") {
      console.log("你点击了省份：", params);
    } else if (
      params.componentType === "series" &&
      params.seriesType === "scatter"
    ) {
     //地标点检事件
    }
  });
};

五、至于下一级，只需要再次调用 initProvinceMap()，传入对应上一级点击的名称即可