vue3+vite+echarts集成中国地图

前段时间我们的项目有使用到echarts集成中国地图的功能，实际上这个功能我进项目组的时候人家就已经完成了，我这边只是简单复刻了一遍，先看看效果图；

上代码，走起

<template>
  <!-- 第一步：设置地图容器 -->
  <div id="map" style="width: 100vw; height: 100vh"></div>
</template>

<script setup lang="ts">
// 第二步：导入模块
import * as echarts from 'echarts'
import { onMounted, ref, reactive } from 'vue'
import { getCityJson } from '@/apis/map'
import { options } from './index'

// 第三步：存储中国地图JSON数据
let mapData = ref([])
// 第三步：存放echarts实例
let myMap = reactive({})

// 第三步：Vue挂载DOM后执行回调
onMounted(async () => {
  initMap() // 第四步：初始化地图

  // 点击中国地图的事件回调
  myMap.on('click', function (event) {
    if (event?.data?.adcode) {
      switch (event.data.level) {
        // 国/省/市/区
        case 'nation':
        case 'country':
        case 'province':
        case 'city':
          uploadMapData(event.data.adcode + '_full')
          break
        // 县
        case 'district':
          uploadMapData(event.data.adcode)
          break
        // 其他
        default:
          break
      }
    }
  })

  // 空白区域点击回调
  myMap.getZr().on('click', function (event) {
    // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
    if (!event.target) {
      // 点击在了空白处，做些什么。
      uploadMapData()
    }
  })

  // 视图变化既重新渲染
  window.addEventListener('resize', function () {
    myMap.resize()
  })
})

// 第六步：加载地图数据，注册地图
const loadMapData = async (id: string = '100000_full'): Promise<any> => {
  const mapJson = await getCityJson(id) // 获取json数据
  echarts.registerMap('china', mapJson) // 注册地图
  mapData = mapJson.features.map(item => item.properties) // 获取地图数据（一定要加上，不加上的话，通过点击事件下钻时，event内的data数据会是空的）
  myMap.setOption(options(mapData)) //数据渲染
}

// 第五步：更新数据
const uploadMapData = async (id: string = '100000_full'): Promise<void> => {
  await loadMapData(id)
}

// 地图初始化
const initMap = () => {
  // 基于准备好的dom，初始化echarts实例
  myMap = echarts.init(document.getElementById('map'))
  uploadMapData() // 第五步：更新数据（这个方法可以写一些其他逻辑，比如loading，或者加载一些其他数据）
}
</script>

<style scoped lang="scss"></style>

options文件，都是echarts的option配置属性，常量属性symbol 是一个icon来着，你可以删掉

const symbol =
  'image://data:image/png;base64,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'

export const options = (
  data: any,
  layoutCenter: string[] = ['50%', '50%'],
  layoutSize: string = '130%'
) => {
  return {
    backgroundColor: 'transparent',
    visualMap: {
      type: 'continuous',
      show: false,
      inRange: {
        color: ['#1858a3', '#1b549f', '#2aa7d1'],
      },
      outOfRange: {
        color: ['#1858a3'],
      },
      splitNumber: 0,
    },
    geo: [
      {
        aspectScale: 0.8,
        layoutCenter: ['50%', '50%'], // 地图中心
        layoutSize, // 地图大小
        show: true,
        map: 'china', // 地图类型-与registerMap注册地图的名字相同
        roam: false, // 是否开启鼠标缩放和平移漫游
        zoom: 0.65, // 当前视角的缩放比例
        label: {
          show: false, // 是否显示标签
          color: '#fff', // 标签字体颜色
        },
        itemStyle: {
          areaColor: '#1b549f',
          borderColor: '#c0f3fb', // 地图边框颜色
          borderWidth: 1.5, // 地图边框宽度
          shadowColor: 'rgba(44, 171, 213, 0.3)',
          shadowOffsetY: 10,
          shadowBlur: 10,
        },
        emphasis: {
          itemStyle: {
            areaColor: 'rgba(0,254,233,0.6)',
          },
        },
        regions: [
          {
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: '#009cc9',
                },
              },
            },
            label: {
              show: false,
              color: '#FFFFFF',
              fontSize: 12,
            },
          },
        ],
      },
      {
        type: 'map',
        map: 'china',
        zlevel: -2,
        aspectScale: 0.8,
        zoom: 0.65,
        layoutCenter: ['50%', '53%'],
        layoutSize,
        roam: false,
        silent: true,
        itemStyle: {
          borderWidth: 1,
          borderColor: 'rgba(58,149,253,0.6)',
          shadowColor: 'rgba(27,84,159,1)',
          shadowOffsetY: 5,
          shadowBlur: 15,
          areaColor: '#0c235b',
        },
        regions: [
          {
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: '#009cc9',
                },
              },
            },
            label: {
              show: false,
              color: '#FFFFFF',
              fontSize: 12,
            },
          },
        ],
      },
    ],
    series: [
      {
        type: 'map', // 系列类型-地图
        map: 'china', // 地图类型-与registerMap注册地图的名字相同
        geoIndex: 0,
        roam: true, // 是否开启鼠标缩放和平移漫游
        zlevel: 0,
        aspectScale: 0.8,
        zoom: 0.65, // 当前视角的缩放比例
        animation: false,
        layoutCenter,
        layoutSize,
        data,
      },
      {
        type: 'map', // 系列类型-地图
        map: '中国', // 地图类型-与registerMap注册地图的名字相同
        geoIndex: 0,
        aspectScale: 0.8,
        zoom: 0.65,
        showLegendSymbol: true,
        roam: true,
        label: {
          color: '#fff',
          fontSize: '120%',
          show: true,
        },
        // select: {
        //   disabled: true, // 数据项图形是否能被选中
        // },
        itemStyle: {
          // areaColor: {
          //   type: 'linear',
          //   x: 1200,
          //   y: 0,
          //   x2: 0,
          //   y2: 0,
          //   colorStops: [
          //     {
          //       offset: 0,
          //       color: 'rgba(3,27,78,0.75)',
          //     },
          //     {
          //       offset: 1,
          //       color: 'rgba(58,149,253,0.75)',
          //     },
          //   ],
          //   global: true,
          // },
          borderColor: '#fff',
          borderWidth: 0.2,
        },
        layoutCenter,
        layoutSize, // 地图大小
        animation: false,
        markPoint: {
          symbol: 'none',
        },
        data: [],
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo', // 对应上面定义的地图
        geoIndex: 0,
        zlevel: 5,
        label: {
          show: true,
          formatter: '',
          color: '#54f7f9',
          fontSize: 16,
          fontWeight: 'bold',
        },
        itemStyle: {
          opacity: 1,
        },
        symbol: symbol,
        symbolSize: [20, 20],
        symbolOffset: [0, -20],
        z: 999,
        // data: [[113.280637, 23.125178]],
      },
    ],
  }
}

加载中国地图的json接口

import require from '@/utils/require'

export const getCityJson = (id: string) => {
  return require({
    url: `https://geo.datav.aliyun.com/areas_v3/bound/${id}.json`,
    method: 'GET',
  })
}

目录结构