echarts地图实现3d效果，自定义背景图,打点图标及鼠标经过内容样式

1.引入echarts和json数据

const echarts = require('echarts');

import mapJson from 'echarts/map/json/china.json';

2.实现地图3d效果

      var imgData = '' //地图背景图
      var domImg = new Image();
      domImg.src = imgData;
      this.mapRef = echarts.init(this.$refs.mapRef);
      echarts.registerMap('china', mapJson);
      let options = {
        geo: [
          {
            // 主图
            map: 'china',
            zlevel: 0,
            zoom: 1.2, //当前视角的缩放比例
            roam: false, //是否开启平游或缩放
            center: undefined,
            top: '15%',//***********重点**********距离顶部的位置，每层向下一个百分比
            left: '10%',
            show: true,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgb(17,246,242)",
                borderWidth: 1,
                areaColor: {
                  type: "pattern",
                  image: domImg, //配置图片
                  repeat: "repeat", //可选值repeat、no-repeat、repeat-x、repeat-y
                },
              },
              emphasis: {
                areaColor: "inherit"
              },
            },
          },
          //第一层投影
          {
            map: 'china',
            zlevel: -1,
            zoom: 1.2, //当前视角的缩放比例
            roam: false, //是否开启平游或缩放
            center: undefined,
            top: '15.1%',//***********重点**********距离顶部的位置，每层向下一个百分比
            left: '10%',
            show: true,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderJoin: "round",
                borderColor: "rgb(17,246,242)",
                borderWidth: 5,
                areaColor: "rgba(22,67,91, 1)",
                shadowColor: "rgba(22,67,91, .7)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 28,
              },
              emphasis: {
                areaColor: "inherit"
              },
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  }
                },
                label: {
                  show: false // 隐藏文字
                }
              },
            ],
          },
          {
            map: 'china',
            zlevel: -2,
            zoom: 1.2, //当前视角的缩放比例
            roam: false, //是否开启平游或缩放
            center: undefined,
            top: '16.5%',//***********重点**********距离顶部的位置，每层向下一个百分比
            left: '10%',
            show: true,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderJoin: "round",
                borderColor: "rgba(53,75,86,1)",
                borderWidth: 5,
                areaColor: "rgba(24,60,85, 1)",
                shadowColor: "rgba(24,60,85, .7)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 25,
              },
              emphasis: {
                areaColor: "inherit"
              },
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  // 隐藏地图
                  normal: {
                    opacity: 0, // 为 0 时不绘制该图形
                  }
                },
                label: {
                  show: false // 隐藏文字
                }
              },
            ],
          },
        ],
        series: [{
          type: "scatter",
          coordinateSystem: "geo",
          symbol: 'image://' + require('图片url'), //自定义打点图标
          symbolSize: [18, 21],
          data: this.convertData(this.cityData), //处理数据格式
          hoverAnimation: true,
          label: {
            normal: {
              formatter: "{b}",
              position: "bottom",
              show: true,
              color: "#fff",
              fontSize: 12,
            },
          },
          zlevel: 1,
        }],
        tooltip: {
          trigger: 'item', // 触发类型，'item' 表示数据项图形触发，'axis' 表示坐标轴触发
          backgroundColor: "transparent",
          formatter: function (params) {
            let str = `html代码` //自定义鼠标经过的提示
            // params 是包含当前数据信息的对象
            return str;
          }
        },
      }
      this.mapRef.setOption(options);
      window.addEventListener('resize', () => {
        this.mapRef.resize()
      })