echarts 展示伪2.5D全国地图及下钻功能实现

首先你需要准备的是 下载好echarts,和地图的json 文件 (gitee.com/feng_hongwe…)

接下来写一个获取静态资源的函数 //注意文件存放位置换成自己的

引入cityMap

import { cityMap } from '../map/china-main-city-map.js';
const getAssetsFile = (chinaId = 100000) => {
  return axios({
    method: 'get',
    url: new URL(`../map/${chinaId}.json`, import.meta.url).href,
  })
    .then((res) => {
      return res;
    })
    .catch((err) => {
      console.log('地图加载失败==========', err);
    });
};

初始化echarts // 地图初始化 ，获取本地地图文件并开始绘制

const plantOtherInfo=ref({
   adCode:100000
})
const mapInitName=ref('china')

const myChart = ref(null);
const initMapChart = async () => {
  const joinName = cityMap[plantOtherInfo.value.adCode];
  const response = await getAssetsFile(plantOtherInfo.value.adCode);
  mapInitName.value = joinName;
  myChart.value = echarts.init(document.getElementById('mapCharts'));
  initOptionsData(myChart.value, response);
};

绘制函数

const initOptionsData = (myChart, mapJson) => {
  echarts.registerMap(mapInitName.value, mapJson);
  myChart.setOption({
    tooltip: {
      trigger: 'item',
      show: false,
    },
    geo: [
      {
        map: mapInitName.value,
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ['50%', '50%'],
        layoutSize: '100%',
        show: true,
        roam: false,
        label: {
          show: true, // 各个省市县的名字
          color: '#fff',
        },
        itemStyle: {
          areaColor: {
            image: mapBg, // 背景图
            repeat: 'no-repeat',
          },
          borderColor: 'rgba(218, 241, 243)',
          borderWidth: 1.5,
          shadowColor: 'rgba(218, 241, 243)',
        },
        emphasis: {
          itemStyle: {
            show: false,
            color: '#fff',
            areaColor: '#80899C',
          },
          label: {
            show: true,
            color: '#fff',
          },
        },
      },
      // 重影
      {
        type: 'map',
        map: mapInitName.value,
        zlevel: -1,
        aspectScale: 1,
        zoom: 1,
        layoutCenter: ['50%', '51.5%'],
        layoutSize: '100%',
        roam: false, // 允许缩放和平移
        silent: true,
        itemStyle: {
          borderWidth: 1,
          shadowOffsetY: 5,
          shadowBlur: 15,
          borderColor: 'rgba(105, 135, 139)',
          shadowColor: 'rgba(105, 135, 139)',
          areaColor: {
            image: mapBg, // 背景图
            repeat: 'no-repeat',
          },
        },
        regions: [
          {
            // 隐藏南海诸岛,因为顶层已经添加过了
            name: '南海诸岛',
            itemStyle: {
              normal: {
                opacity: 0, // 为 0 时不绘制该图形
              },
            },
            label: {
              show: false,
            },
          },
        ],
      },
    ],
  });

  // 点击地图
  myChart.on('click', (params) => {
      // 下钻功能在这里，找到params 中的参数，在cityMap 中找到对应的名字及其编号 再次调用 initMapChart 函数，传入合适的 code及其地图对应的名字
  });
};