中国地图3D立体效果

中国地图3D立体效果

具体思路：
geo叠加3层，zlevel是重叠的优先级

<div class="map">
    <div class="charts" ref="chartsBox"></div>
    <div class="e-label">
      <p class="e-label-title">项目图例</p>
      <p>区域公司<img src="../../../assets/index/project.png" alt=""></p>
      <p>光伏产业<img src="../../../assets/overview/sun.png" alt=""></p>
    </div>
</div>

import resize from '@/components/mixins/resize'
import '../../../../node_modules/echarts/map/js/china.js'
import { getMapData } from '@/api/overview.js'
export default {
  mixins: [resize],
  props: {
    search: Object
  },
  watch: {
    search: {
      deep: true,
      handler() {
        this.initData()
      }
    }
  },
  data() {
    return {
      back: false,
      chart: null,
      pinRegois: {
        '台湾': 'taiwan',
        '黑龙江': 'heilongjiang',
        '内蒙古': 'neimenggu',
        "吉林": 'jilin',
        '北京': 'beijing',
        "辽宁": 'liaoning',
        "河北": 'hebei',
        "天津": 'tianjin',
        "山西": 'shanxi',
        "陕西": 'shanxi1',
        "甘肃": 'gansu',
        "宁夏": 'ningxia',
        "青海": 'qinghai',
        "新疆": 'xinjiang',
        "西藏": 'xizang',
        "四川": 'sichuan',
        "重庆": 'chongqing',
        "山东": 'shandong',
        "河南": 'henan',
        "江苏": 'jiangsu',
        "安徽": 'anhui',
        "湖北": 'hubei',
        "浙江": 'zhejiang',
        "福建": 'fujian',
        "江西": 'jiangxi',
        "湖南": 'hunan',
        "贵州": 'guizhou',
        "云南": 'yunnan',
        "广东": 'guangdong',
        "广西": 'guangxi',
        "海南": 'hainan',
        '上海': 'shanghai',
        '香港': 'xianggang',
        '澳门': 'aomen',
        '南海诸岛': 'nanhai'
      },
      mapIcon: {
        area: 'path://M185.37,75.51A8.07,8.07,0,0,0,178.84,70l-50.19-7.29L106.2,17.22a8.09,8.09,0,0,0-14.51,0L69.24,62.71,19,70a8.09,8.09,0,0,0-4.48,13.8l36.32,35.41-8.57,50a8.08,8.08,0,0,0,11.74,8.53L99,154.12l44.89,23.61a8.09,8.09,0,0,0,11.74-8.53l-8.57-50L183.33,83.8A8.07,8.07,0,0,0,185.37,75.51Z',
        province: 'path://M90.831,232.96l.02,1.782H93.5l-.275-1.782Zm5.845,1.782-.58-1.782H93.7l.334,1.782Zm.884,2.709-.747-2.288H94.1l.422,2.288Zm-3.075,3.636L94,238.005H90.9l.039,3.083Zm-.56-3.636-.363-2.288h-2.7l.029,2.288Zm-6.778-2.709.324-1.782h-2.1l-.285.012-.108.3-.481,1.469Zm3.2-1.782h-2.4l-.275,1.782H90.32Zm-.029,2.2H87.609l-.354,2.288h3.026Zm-.039,2.842H87.167l-.481,3.083h3.546Zm-3.212-2.842H84.357l-.737,2.288h3.026Zm-4.637,5.924h3.546l.57-3.083H83.434Zm16.307,0-1-3.083h-3.1l.56,3.083Zm-6.307,7.646H88.867l.639-7.646h2.289Z',
        plates: 'path://M90.831,232.96l.02,1.782H93.5l-.275-1.782Zm5.845,1.782-.58-1.782H93.7l.334,1.782Zm.884,2.709-.747-2.288H94.1l.422,2.288Zm-3.075,3.636L94,238.005H90.9l.039,3.083Zm-.56-3.636-.363-2.288h-2.7l.029,2.288Zm-6.778-2.709.324-1.782h-2.1l-.285.012-.108.3-.481,1.469Zm3.2-1.782h-2.4l-.275,1.782H90.32Zm-.029,2.2H87.609l-.354,2.288h3.026Zm-.039,2.842H87.167l-.481,3.083h3.546Zm-3.212-2.842H84.357l-.737,2.288h3.026Zm-4.637,5.924h3.546l.57-3.083H83.434Zm16.307,0-1-3.083h-3.1l.56,3.083Zm-6.307,7.646H88.867l.639-7.646h2.289Z',
      },
      iconColor: {
        area: ["#ffea00", '区域公司'],
        province: ["#01F3F7", '光伏产业'],
        plates: ["#01F3F7", '光伏产业']
      },
      mapJson: null,
      provinceCode: 'china'
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getMapData(this.search).then(res => {
        if (res.code == 200) {
          this.mapData = res.data;
          if (this.search.province == '') {
            this.provinceCode = 'china'
          }
          this.initChart();
        }
      })
    },
    initChart() {
      this.mapJson = this.provinceCode == 'china' ? require(`../../../../node_modules/echarts/map/json/china.json`) : require(
        `../../../../node_modules/echarts/map/json/province/${this.provinceCode}.json`);
      this.chart = this.$echarts.init(this.$refs.chartsBox);
      this.$echarts.registerMap('map', this.mapJson);
      var option = {
        //   backgroundColor: "black",
        geo: this.geoFn(),
        series: this.seriesFn(),
        tooltip: {
          trigger: 'item',
        },
        animation: false
      };
      this.chart.setOption(option, true);
      this.chart.off('click');
      this.chart.on('click', this.provinceMapClick);
      this.chart.on('georoam', (params) => { //放大缩小
        var optionTmp = this.chart.getOption();
        if (params.zoom != null && params.zoom != undefined) {
          optionTmp.geo[0].zoom = optionTmp.geo[2].zoom;
          optionTmp.geo[1].zoom = optionTmp.geo[2].zoom;
          optionTmp.geo[0].center = optionTmp.geo[2].center;
          optionTmp.geo[1].center = optionTmp.geo[2].center;
        } else {
          optionTmp.geo[0].center = optionTmp.geo[2].center;
          optionTmp.geo[1].center = optionTmp.geo[2].center;
        }
        // this.chart.dispatchAction({
        //   type: 'restore'
        // })
        this.chart.setOption(optionTmp);
      });
    },
    geoFn() {
      const geo = [
        // 高亮虚影层，描绘白色轮廓
        {
          map: 'map',
          roam: true, // 是否允许缩放
          silent: false,
          // layoutCenter: ["50%", "50%"],  //地图位置
          // layoutSize: this.provinceCode == 'china' ? '120%' : '100%',
          zoom: this.provinceCode == 'china' ? '1.15' : '1',
          itemStyle: {
            normal: {
              borderColor: 'rgba(255,255, 255,1)',
              borderWidth: 3,
              shadowColor: 'rgba(255,255, 255,1)',
              shadowOffsetY: 0,
              shadowBlur: 5,
            },
          },
          zlevel: -1,
        },
        // 底部重影层，蓝色偏移形成立体感
        {
          map: 'map',
          roam: true, // 是否允许缩放
          silent: false,
          // layoutCenter: ["50%", "50%"],  //地图位置
          // layoutSize: this.provinceCode == 'china' ? '120%' : '100%',
          zoom: this.provinceCode == 'china' ? '1.15' : '1',
          itemStyle: {
            normal: {
              shadowColor: "#00BAFF",
              shadowOffsetX: 0,
              shadowOffsetY: 13,
              opacity: 0.8,
            },
            emphasis: {
              areaColor: "#00BAFF",
            },
          },
          zlevel: -2,
        },
        // 真实层
        {
          map: this.provinceCode == 'china' ? 'china' : 'map',
          zoom: this.provinceCode == 'china' ? '1.15' : '1',
          // layoutCenter: ["50%", "50%"],  //地图位置
          // layoutSize: this.provinceCode == 'china' ? '120%' : '100%',
          roam: true, //是否开启平游或缩放
          silent: false,
          label: {
            show: true,
            color: "#FFFFFF",
            fontSize: 10,
          },
          itemStyle: {
            normal: {
              areaColor: "#011C33",
              borderColor: "#007480",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#108dc7",
              borderColor: "#108dc7",
              label: {
                show: true,
                color: "#fff",
              },
            },
          },
          // data: data,
          zlevel: 0,
        },
      ]
      return geo;
    },
    seriesFn() {
      let series = [];
      let paramArr = [];
      
      if (this.mapData.plates) {
        paramArr = ['area', 'plates']
      } else {
        paramArr = ['area', 'province']
      }
      if(this.search.areaCode == '' && this.search.province != ''){
        paramArr = paramArr.slice(1)
      }
      paramArr.forEach(paramItem => {
        this.mapData[paramItem].forEach(item => {
          let data = this.convertData(item);
          series.push({
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: this.mapIcon[paramItem],
            itemStyle: {
              normal: {
                color: this.iconColor[paramItem][0]
              }
            },
            symbolSize: 14,
            tooltip: {
              show: true,
              transitionDuration: 0,
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              },
              backgroundColor: 'rgba(0, 60, 93, .9)',
              formatter(e) {
                if (paramItem == 'area') {
                  var html = `<div class="overview-tooltip"><p>${e.name}</p>`;
                  html +=
                    `<div><span class>装机容量</span><span>${item.capacity}万KW</span></div>`;
                  html +=
                    `<div><span>机组台数</span><span>${item.installedUnits}台</span></div>`
                } else if (paramItem == 'province') {
                  var html = `<div class="overview-tooltip"><p>${item.province}光伏产业</p>`;
                } else {
                  var html = `<div class="overview-tooltip"><p>${item.orgShortName}光伏产业</p>`;
                }
                html += `</div>`;
                return html;
              }
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1,
            data: data,
          })
        });
      })
      return series;
    },
    convertData(data) {
      let res = [];
      res.push({
        name: data.areaShortName,
        value: data.value,
        province: data.province
      });
      return res;
    },
    provinceMapClick(params) {
      if (params.seriesType == "scatter" && params.data.province) {
        let data = params.data;
        this.provinceCode = this.pinRegois[data.province]
        this.$emit('getProvince', params.data.province)
      }
    },
  }
}

<style lang="scss" scoped>
.map {
    position: relative;
    height: calc(100% - 48px);
    width: 100%;
    .e-label {
        position: absolute;
        left: 20px;
        bottom: 20px;
        width: 160px;
        padding: 10px;
        background-color: #021729;
        border-radius: 10px;
        opacity: 0.8;
        font-size: 12px;
    }

    .e-label p {
        margin: 0;
        line-height: 22px;
    }

    .e-label .e-label-title {
        margin-bottom: 5px;
        font-size: 14px;
    }

    .e-label p img {
        float: right;
    }
}
.charts {
    height: 100%;
    width: 100%;
    background: url('../../../assets/overview/map-bg.png') no-repeat center;
    background-size: 100% 100%;
}
</style>
<style lang='scss'>
.overview-tooltip > p {
    min-width: 200px;
    margin-bottom: 10px;
    padding: 5px 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background: url('../../../assets/overview/detail-bg.png') no-repeat center;
}

.overview-tooltip > div {
    overflow: hidden;
    padding: 4px 10px;
    font-size: 14px;
    span {
        &:last-child {
            margin-left: 30px;
        }
    }
}
</style>