先看圖

1.png

2.png

3.png

話不多說(shuō)上代碼

<template>
  <div class="map">
    <div class="Map3D" id="Map3D" ref="Map3D"></div>
  </div>
</template>

<script>
import liaoNingJson from '../../../assets/data/liaoning.json'
export default {
  data() {
    return {
      option: null,
      chartMap: {},
      province: [],
    }
  },
  props: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
    this.processingData()
  },
  beforeDestroy() {},
  methods: {
    // 初始化地圖
    initMap() {
      this.chartMap = this.$echarts.init(document.getElementById('Map3D'))
      // this.$echarts.registerMap('liaoNing', liaoNingJson)

      this.$echarts.registerMap('liaoNing', { geoJSON: liaoNingJson })
      console.log('liaoNing: ', liaoNingJson)

      const chinaGeoCoordMap = {
        '沈陽(yáng)市': [123.42, 41.79],
        '大連市': [121.61, 38.91],
        '鞍山市': [122.99, 41.11],
        '撫順市': [123.92, 41.87],
        '本溪市': [123.77, 41.29],
        '丹東市': [124.38, 40.12],
        '錦州市': [121.13, 41.11],
        '營(yíng)口市': [122.23, 40.66],
        '阜新市': [121.64, 42.01],
        '遼陽(yáng)市': [123.18, 41.26],
        '盤(pán)錦市': [122.06, 41.12],
        '鐵嶺市': [123.84, 42.29],
        '朝陽(yáng)市': [120.45, 41.57],
        '葫蘆島市': [120.85, 40.75]
      }

      // 散點(diǎn)
      const chinaDatas = []
      const mapObject = { name: '', value: null }
      for (const key in chinaGeoCoordMap) {
        mapObject.name = key
        mapObject.value = chinaGeoCoordMap[key]
        chinaDatas.push(JSON.parse(JSON.stringify(mapObject)))
      }

      this.option = {
        geo: [
          {
            zlevel: 3, //geo顯示級(jí)別，默認(rèn)是0 【最頂層圖形】
            map: 'liaoNing', //地圖名
            roam: false,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.1,
            label: {
              show: false
              // fontSize: 18,
              // color: '#fff'
            },
            itemStyle: {
              borderColor: '#1488A2',
              borderWidth: 1.5,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [
                  {
                    offset: 0,
                    color: '#008FF6'
                  },
                  {
                    offset: 1,
                    color: '#0E3AB4'
                  }
                ],
                global: false
              }
            },
            emphasis: {
              label: {
                show: false
              },
              itemStyle: {
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.9,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#00DB8A'
                    },
                    {
                      offset: 1,
                      color: '#00DDFF'
                    }
                  ],
                  global: false
                },
                shadowColor: '#fff',
                shadowBlur: 10,
                shadowOffsetY: 8,
                shadowOffsetX: 6,
                focus: 'none',
                borderWidth: 3,
                borderColor: '#3FD6DE',
              }
            },
            select: {
              label: {
                show: false
              },
              itemStyle: {
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.9,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#00DB8A'
                    },
                    {
                      offset: 1,
                      color: '#00DDFF'
                    }
                  ],
                  global: false
                },
                shadowColor: '#000',
                shadowBlur: 10,
                shadowOffsetY: 8,
                shadowOffsetX: 6,
                focus: 'none',
                label: {
                  show: true
                },
                borderWidth: 3,
                borderColor: '#00ACDD'
              },
            },
            selectedMode: 'single'
          },
          {
            zlevel: 2, //geo顯示級(jí)別，默認(rèn)是0 【第二層圖形】
            map: 'liaoNing',
            roam: false,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.1,
            label: {
              show: false
            },
            itemStyle: {
              //此處border設(shè)置你想要顯示的地圖外邊框樣式，可設(shè)置border顏色，陰影等
              borderColor: '#00B5FF',
              borderWidth: 4,
              shadowColor: '#00B5FF',
              shadowOffsetY: 6,
              shadowOffsetX: 3
            },
            emphasis: {
              disabled: true,
              show: false
            },
          },
          {
            zlevel: 1, //geo顯示級(jí)別，默認(rèn)是0 【最底層層圖形】
            map: 'liaoNing',
            roam: false,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.1,
            label: {
              show: false
            },
            itemStyle: {
              //底層地圖樣式
              //此處border設(shè)置你想要顯示的地圖外邊框樣式，可設(shè)置border顏色，陰影等
              borderColor: '#01A6DE',
              borderWidth: 4,
              shadowColor: '#01A6DE',
              shadowOffsetY: 10,
              shadowOffsetX: 6
            },
            emphasis: {
              disabled: true,
              show: false
            },
          }
        ],
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo', //使用地理坐標(biāo)系
            //要有對(duì)應(yīng)的經(jīng)緯度才顯示，先經(jīng)度再維度
            data: chinaDatas,
            zlevel: 3,
            rippleEffect: {
              scale: 4, // 波紋的最大縮放比例
              brushType: 'stroke', // 波紋的繪制方式 stroke
              period: 4,
            },
            hoverAnimation: false,
            label: {
              //圖形上的文本標(biāo)簽
              show: true,
              formatter: '',
              position: 'right',
              fontWeight: 500,
              fontSize: 14,
              color: '#fff',
              shadowColor: '#000'
            },
            emphasis: {
              scale: '1.4',
              itemStyle: {
                color: '#fff',
                shadowBlur: 10,
                shadowColor: '#333'
              },
            },
            //默認(rèn)樣式
            itemStyle: {
              color: '#77E2FE',
              shadowBlur: 10,
              shadowColor: '#31A2EE'
            },
          }
        ],
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0)',
          borderWidth: 0,
          position: 'top',
          className: 'custom-tooltip-box',
          formatter: function (item) {
            // 循環(huán)處理數(shù)據(jù)，展示數(shù)據(jù)
            var htmlText = `<div class='custom'>
              <div class="custom-tooltip-style">
                <p>2024</p>
              </div>
              <div class="bottom">
                <div class="line"></div> 
              </div>
              </div>`
            return htmlText
          },
          textStyle: {
            color: 'transparent',
          }
        }
      }

      this.chartMap.setOption(this.option)
      // 點(diǎn)擊下一層
      this.chartMap.on('click', (param) => {
        this.getCountyOption(param.name)
      })
      // 返回上一層
      this.chartMap.getZr().on('click', (params) => {
        if (!params.target) {
          this.initMap()
        }
      })
    },
    // 處理數(shù)據(jù)后期可以改為接口請(qǐng)求
    processingData() {
      let province = []
      liaoNingJson.features.forEach((item) => {
        let obj = {
          name: item.properties.name,
          id: item.properties && item.properties.subFeatureIndex
        }
        province.push(obj)
      })
      this.province = province
    },
    // 下一層數(shù)據(jù)
    getCountyOption(param) {
      console.log('param: ', param)
      let mapData = null
      this.province.forEach((item) => {
        if (item.name == param) {
          console.log('item: ', item)
          mapData = require('../../../assets/data/shenyang.json')
          this.$echarts.registerMap('liaoNing', { geoJSON: mapData })
          this.chartMap.setOption(this.option, true)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.map{
  width: 100%;
  height: 100%;
}
.Map3D {
  width: 100%;
  height: 100vh;

}
:deep(.custom-tooltip-box) {
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  .custom {
    // width: 240px;
    display: flex;
    flex-wrap: wrap;
    display: inline-block;
    .custom-tooltip-style {
      background: url('../../../assets/imgs/echartsBg.png') no-repeat center center;
      background-size: 100% 100%;
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 10px 0 #00000066, inset 0 -3px 16px 0 #27cfff26;
      border-radius: 6px;
      padding: 10px 10px;
      p {
        color: #78E3FF;
        font-size: 24px;
        padding: 0 10px;
      }
      .info {
        display: flex;
        align-items: center;
        justify-content: center;
        .info-item {
          .item {
            display: flex;
            align-items: center;
            padding: 20px 10px 0 10px;
            .icon {
              width: 86px;
              height: 25px;
              color: #fff;
              text-align: center;
            }
            .blue {
              background: url("../../../assets/imgs/blue.png") no-repeat center center;
              background-size: 100% 100%;
            }
            .green {
              background: url("../../../assets/imgs/green.png") no-repeat center center;
              background-size: 100% 100%;
            }
            .orange {
              background: url("../../../assets/imgs/orange.png") no-repeat center center;
              background-size: 100% 100%;
            }
            .desc {
              color: #fff;
              font-size: 24px;
              font-weight: bold;
              padding-left: 20px;
            }
          }
        }
        
      }
    }
    .bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      .line {
        width: 4px;
        height: 65px;
        background: url('../../../assets/imgs/line.png') no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>