echarts map3D下钻及scatter3D的运用

echarts 3d地图不同区域填充不同颜色以及下钻打点解决

中途出现了两个问题，一个是下钻打点之后，移动地图，定位点的位置跟地图出现移位，另一个是打点默认黑色，解决之后在代码里都有说明

<template>
  <div>
    <div id="map" ref="myEchart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
import features from '../../../assets/js/index/shangyu'
let Echarts
export default {
  props: {
    addressName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isArea: true,
      areaName: '',
      pointData: []
    }
  },
  mounted () {
    this.map()
  },
  methods: {
    map () {
      let mapJson = features
      if (Echarts !== null && Echarts !== '' && Echarts !== undefined) {
        Echarts.dispose()
      }
      if (this.areaName) {
        mapJson = {
          features: features.features.filter((v) => {
            return v.properties.name === this.areaName
          })
        }
        if (this.areaName === '百官街道') {
          this.pointData = [
            {
              name: '文化社区',
              value: [120.890766, 30.04924],
              pointValue: '98',
              flag: true,
              img: `image://${require('../../../assets/img/hong.png')}`
            },
            {
              name: '文化新村',
              value: [120.878099, 30.028623],
              pointValue: '98',
              flag: true,
              img: `image://${require('../../../assets/img/hong.png')}`
            }
          ]
        } else if (this.areaName === '崧厦街道') {
          this.pointData = [
            {
              name: '蔡林村',
              value: [120.832713, 30.09329],
              pointValue: '98',
              flag: true,
              img: `image://${require('../../../assets/img/lv.png')}`
            },
            {
              name: '东凌湖村',
              value: [120.825199, 30.091851],
              pointValue: '93',
              flag: true,
              img: `image://${require('../../../assets/img/lv.png')}`
            }
          ]
          // echarts.registerMap('上虞', mapJson)
        } else {}
        // 不用定时器进入乡镇街道地图，村社区的点貌似显示不出来
        setTimeout(() => {
          echarts.registerMap('上虞', mapJson)
          this.mapRender()
        }, 0)
        // echarts.registerMap('上虞', mapJson)
      } else {
        this.pointData = []
        echarts.registerMap('上虞', mapJson)
        this.mapRender()
      }
    },
    mapRender () {
      const arr = [
        {
          name: '百官街道',
          value: 93,
          flag: true
        },
        {
          name: '东关街道',
          value: 93,
          flag: true
        },
        {
          name: '曹娥街道',
          value: 90,
          flag: true
        },
        {
          name: '道墟街道',
          value: 99,
          flag: true
        },
        {
          name: '小越街道',
          value: 96,
          flag: true
        },
        {
          name: '梁湖街道',
          value: 96,
          flag: true
        },
        {
          name: '崧厦街道',
          value: 88,
          flag: true
        },
        {
          name: '章镇镇',
          value: 97,
          flag: true
        },
        {
          name: '丰惠镇',
          value: 98,
          flag: true
        },
        {
          name: '上浦镇',
          value: 99,
          flag: true
        },
        {
          name: '汤浦镇',
          value: 89,
          flag: true
        },
        {
          name: '永和镇',
          value: 97,
          flag: true
        },
        {
          name: '驿亭镇',
          value: 98,
          flag: true
        },
        {
          name: '谢塘镇',
          value: 98,
          flag: true
        },
        {
          name: '盖北镇',
          value: 96,
          flag: true
        },
        {
          name: '长塘镇',
          value: 91,
          flag: true
        },
        {
          name: '下管镇',
          value: 88,
          flag: true
        },
        {
          name: '丁宅乡',
          value: 83,
          flag: true
        },
        {
          name: '岭南乡',
          value: 96,
          flag: true
        },
        {
          name: '陈溪乡',
          value: 97,
          flag: true
        }
      ]
      const option = {
        tooltip: {
          show: true,
          formatter: (params) => {
            let value = ''
            if (params.seriesType === 'scatter3D') {
              value = params.data.pointValue
            } else {
              value = params.value
            }
            return `<div style="position:absolute;left:0;top:0;width:8px;height:8px;background-color:#FD9A5A;"></div>
            <div class='tips' style="padding:0 12px;color: #fff;">
              <h1 style='font-size:16px;'>${params.name}</h1>
              <p style="font-size:14px;"><span>指数：</span>${value}</p>
            </div>`
          },
          borderColor: '#000080',
          borderWidth: 1,
          padding: [0, 0],
          backgroundColor: '#1B212B',
          borderRadius: 0
          // textStyle: { color: "blue" },
        },
        // backgroundColor: '#fff',
        visualMap: {
          show: false,
          type: 'piecewise',
          seriesIndex: [0], // 指定取哪个系列的数据，即哪个系列的 series.data，不加这个打点会默认黑色，这个问题也找了好久才解决的
          // inRange: {
          //   color: ['#7F1000', '#BD1317', '#E64C45', '#FF8C71', '#FDD29F']
          // }
          // 根据arr数组里的value值渲染不同
          pieces: [
            {
              max: 85,
              color: '#FF0000'
            },
            {
              min: 85,
              max: 90,
              color: '#FACC14'
            },
            {
              min: 90,
              max: 95,
              color: '#5FFA14'
            },
            {
              min: 95,
              max: 100,
              color: '#096DD9'
            },
            {
              min: 100,
              color: '#000080'
            }
          ]
        },
        // 这里之所以要加个geo3D是为了让series中的scatter3D跟map3D的坐标系保持一致，鼠标旋转过程中不会出现移位
        geo3D: {
          show: false, // 隐藏该层，为true时会出现两个地图
          type: 'map3D',
          map: '上虞',
          regionHeight: 2.5, // 模型的高度
          boxWidth: 35, // 三维地图在三维场景中的宽度
          boxHeight: 122,
          boxDepth: 60, // 三维地图在三维场景中的深度
          top: '-10%',
          // left:'10%',
          shading: 'lambert',
          label: {
            show: false, // 是否显示标签。
            position: ['50%', '50%'],
            formatter: (params) => {
              return params.areaname
            },
            textStyle: {
              color: 'rgba(255,255,255,1)', // 地图初始化区域字体颜色
              fontSize: 12,
              opacity: 1,
              // backgroundColor: '#1B212B',
              // borderColor: '#998484',
              // borderWidth: 1,
              position: 'insideTop',
              padding: [2, 4],
              borderRadius: 0,
              distanca: 20
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: false,
              color: '#fff',
              fontSize: 18
            }
          },
          itemStyle: {
            normal: {
              // 静态模式下显示的默认样式
              borderWidth: 1.6,
              borderColor: '#09417F',
              color: '#00254b'
              // opacity: 1
            }, // 阴影效果
            emphasis: {
              /// /鼠标移上去的样式
              borderWidth: 1.6,
              borderColor: '#95FFFF',
              color: '#f2d5ad',
              textStyle: {
                // color: 'blue'
              }
            }
          },
          viewControl: {
            // 用于鼠标的旋转，缩放等视角控制。
            autoRotate: false, // 是否开启视角绕物体的自动旋转查看
            distance: 60, // 默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
            alpha: 50, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向
            beta: -60 // 视角绕 y 轴，即左右旋转的角度
          },
          zlevel: 1
        },
        series: [
          {
            name: 'shangyu',
            type: 'map3D',
            map: '上虞', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
            data: arr,
            geo3DIndex: 0,
            zlevel: 1,
            regionHeight: 2.5, // 模型的高度
            boxWidth: 35, // 三维地图在三维场景中的宽度
            boxHeight: 122,
            boxDepth: 60, // 三维地图在三维场景中的深度
            top: '-10%',
            // left:'10%',
            shading: 'lambert',
            label: {
              show: true, // 是否显示标签。
              position: ['50%', '50%'],
              formatter: (params) => {
                return params.areaname
              },
              textStyle: {
                color: 'rgba(255,255,255,1)', // 地图初始化区域字体颜色
                fontSize: 12,
                opacity: 1,
                position: 'insideTop',
                padding: [2, 4],
                borderRadius: 0,
                distanca: 20
              },
              emphasis: {
                // 对应的鼠标悬浮效果
                show: true,
                color: '#fff',
                fontSize: 12
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 1.6,
                borderColor: '#09417F',
                color: '#00254b'
              },
              emphasis: {
                borderWidth: 1.6,
                borderColor: '#95FFFF',
                color: '#f2d5ad'
              }
            },
            viewControl: {
              // 用于鼠标的旋转，缩放等视角控制。
              autoRotate: false, // 是否开启视角绕物体的自动旋转查看
              // autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
              // autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
              // autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
              // orthographicSize: 110, // 控制地图大小
              // maxOrthographicSize: 110,
              // minOrthographicSize: 110,
              // rotateSensitivity: 0,
              distance: 60, // 默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
              alpha: 50, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向
              beta: -60 // 视角绕 y 轴，即左右旋转的角度
            }
          },
          {
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            geo3DIndex: 0,
            data: this.pointData,
            // 这里可以自定义打点的图片
            // symbol: function (value, params) {
            //   const t = params.data.img
            //   return t
            // },
            symbol: 'pin',
            symbolSize: [14, 14],
            label: {
              show: false
            },
            itemStyle: {
              color: '#000080',
              opacity: 1
            },
            emphasis: {
              label: {
                show: false,
                formatter: function (params) {
                  const t = params.data.name
                  return t
                },
                color: '#fff',
                fontSize: 16
              },
              itemStyle: {
                zoom: 1.2
              }
            },
            zlevel: 10,
            viewControl: {
              orthographicSize: 110, // 控制地图大小
              maxOrthographicSize: 110,
              minOrthographicSize: 110,
              rotateSensitivity: 0
            }
          }
        ]
      }
      Echarts = echarts.init(this.$refs.myEchart)
      Echarts.setOption(option)
      window.onresize = Echarts.resize()
      Echarts.off('click')
      Echarts.on('click', (e) => {
        this.$emit('changeCondition', e)
        if (this.isArea && e.seriesType === 'map3D') this.renderMap(e.name)
        // if (this.isArea) this.renderMap(e)
        if (arr.length > 0) {
          // 选中高亮
          this.$emit('changeMap', e.name)
          if (option.series[0].data.length > 0) {
            Echarts.clear()
            Echarts.setOption(option)
          }
        }
      })
    renderMap (name) {
      if (name !== '上虞' && name) {
        this.isArea = false
        this.areaName = name
        this.map()
        this.$emit('changeMap', name)
      }
    }
  }
}
</script>