Vue2 + Echarts实现3D地图下钻

一、npm安装组件：

    "echarts": "5.4.0",
    "echarts-gl": "^2.0.9",
    "element-china-area-data": "^5.0.2",

二、Vue页面

<template>
  <div class="Map3D" id="Map3D" ref="Map3D" @click="toBack"></div>
</template>
 
<script>
import LongNanJson from '../../../public/static/city/longnan.json';
import axios from 'axios';
import {TextToCode} from "element-china-area-data";
import 'echarts-gl'
 
export default {
  data() {
    return {
      chartMap: {},
      option: null,
    };
  },
  props: {},
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
    window.addEventListener('resize', this.resize)
  },
 
  beforeDestroy() {
    if (!this.chartMap) {
      return
    }
    this.chartMap.dispose()
    this.chartMap = null
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    // 初始化地图
    initMap() {
      this.chartMap = this.$echarts.init(document.querySelector('.Map3D'));
      this.chartMap = this.$echarts.init(this.$refs.Map3D);
      this.$echarts.registerMap('LongNan', LongNanJson)
      this.option = {
        series: [
          {
            type: 'map3D',
            name: '地图',
            selectedMode: 'single', // 地图高亮单选
            regionHeight: 5, // 地图高度
            map: 'LongNan',
            viewControl: {
              distance: 120, // 地图视角 控制初始大小
              alpha: 50,// 倾斜角度
              rotateSensitivity: [1, 1]
            },
            label: {
              show: true, // 是否显示名字
              color: '#fff', // 文字颜色
              fontSize: 18, // 文字大小
              fontWeight: 'bold', // 文字大小
            },
            itemStyle: {
              color: '#224a7b', // 地图背景颜色
              borderWidth: 1,   // 分界线width
              borderColor: '#207fce', // 分界线颜色
              opacity: 0.72
            },
            emphasis: {
              label: {
                show: true, // 是否显示高亮
                textStyle: {
                  color: 'yellow' // 高亮文字颜色
                }
              },
              itemStyle: {
                color: '#007ee8', // 地图高亮颜色
                borderColor: '#6becf5'// 分界线颜色
              }
            },
            light: {
              main: {
                color: '#fff',
                intensity: 1,
                shadow: true,
                shadowQuality: 'high',
                alpha: 25, //
                beta: 20
              },
              ambient: {
                color: '#fff',
                intensity: 0.6
              }
            }
          }
        ]
      };
      this.chartMap.setOption(this.option)
      this.chartMap.on('click', (param) => {
        event.stopPropagation() // 阻止冒泡
        if (param.name) {
          const areaCode = TextToCode['甘肃省']['陇南市'][param.name].code;
          this.getCountyOption(areaCode)
        }
      });
    },
    // 显示各区县地图
    getCountyOption(areaCode) {
      axios.get('static/county/' + areaCode + '.json').then((result) => {
        this.$echarts.registerMap(areaCode, result.data)
        this.option.series[0].map = areaCode
        this.chartMap.setOption(this.option, true);
      });
    },
    // 点击页面, 返回显示中国地图
    toBack() {
      this.$echarts.registerMap('LongNan', LongNanJson)
      this.option.series[0].map = 'LongNan'
      this.chartMap.setOption(this.option, true);
    },
 
    resize() {
      this.chartMap.resize()
    },
  },
};
</script>
 
<style lang="scss" scoped>
.Map3D {
  width: 100%;
  height: 100%;
}
</style>