先看图

1.png

2.png

3.png

话不多说上代码

<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 = {
        '沈阳市': [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],
        '营口市': [122.23, 40.66],
        '阜新市': [121.64, 42.01],
        '辽阳市': [123.18, 41.26],
        '盘锦市': [122.06, 41.12],
        '铁岭市': [123.84, 42.29],
        '朝阳市': [120.45, 41.57],
        '葫芦岛市': [120.85, 40.75]
      }

      // 散点
      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显示级别，默认是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显示级别，默认是0 【第二层图形】
            map: 'liaoNing',
            roam: false,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.1,
            label: {
              show: false
            },
            itemStyle: {
              //此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等
              borderColor: '#00B5FF',
              borderWidth: 4,
              shadowColor: '#00B5FF',
              shadowOffsetY: 6,
              shadowOffsetX: 3
            },
            emphasis: {
              disabled: true,
              show: false
            },
          },
          {
            zlevel: 1, //geo显示级别，默认是0 【最底层层图形】
            map: 'liaoNing',
            roam: false,
            scaleLimit: {
              min: 1,
              max: 4
            },
            zoom: 1.1,
            label: {
              show: false
            },
            itemStyle: {
              //底层地图样式
              //此处border设置你想要显示的地图外边框样式，可设置border颜色，阴影等
              borderColor: '#01A6DE',
              borderWidth: 4,
              shadowColor: '#01A6DE',
              shadowOffsetY: 10,
              shadowOffsetX: 6
            },
            emphasis: {
              disabled: true,
              show: false
            },
          }
        ],
        series: [
          {
            type: 'effectScatter',
            coordinateSystem: 'geo', //使用地理坐标系
            //要有对应的经纬度才显示，先经度再维度
            data: chinaDatas,
            zlevel: 3,
            rippleEffect: {
              scale: 4, // 波纹的最大缩放比例
              brushType: 'stroke', // 波纹的绘制方式 stroke
              period: 4,
            },
            hoverAnimation: false,
            label: {
              //图形上的文本标签
              show: true,
              formatter: '{b}',
              position: 'right',
              fontWeight: 500,
              fontSize: 14,
              color: '#fff',
              shadowColor: '#000'
            },
            emphasis: {
              scale: '1.4',
              itemStyle: {
                color: '#fff',
                shadowBlur: 10,
                shadowColor: '#333'
              },
            },
            //默认样式
            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) {
            // 循环处理数据，展示数据
            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)
      // 点击下一层
      this.chartMap.on('click', (param) => {
        this.getCountyOption(param.name)
      })
      // 返回上一层
      this.chartMap.getZr().on('click', (params) => {
        if (!params.target) {
          this.initMap()
        }
      })
    },
    // 处理数据后期可以改为接口请求
    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
    },
    // 下一层数据
    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>