echarts中map3D点击高亮区域

echarts中map3D点击高亮区域

对于2d的地图高亮可以设置select样式，而3d地图中select设置之后无效，因此使用geo3D属性中的regions进行设置每块区域的颜色，当点击时更新regions数据，并重新进行setOption

const mapCenter = {
  echartMapName: '地图区域名字',
  echartMap: mapjson   //  为地图区域文件返回的json数据
}

this.$echarts.registerMap(mapCenter.echartMapName, mapCenter.echartMap);
mapCenter.echartMap.features.forEach(item => {
// 设置地图数据，包含区域编码
  mapData.push({
    name: item.properties.name,
    areaCode: item.properties.adcode,
  })
  // 配置每块的颜色数据
  regionsData.push({
    name: item.properties.name,
    label: {
      color: '#fff', //文字颜色
    },
    itemStyle: {
      color: '#244a79'
    }
  })
})

let option = {
        geo3D: {
          map: mapCenter.echartMapName,
          roam: true, //是否开启平游或缩放
          show: true,
          regionHeight: 2, //地图高度
          zlevel: -1, // 必须设置，
          viewControl: { // 调整合适的角度显示
            distance: 110, //地图视角 控制初始大小
            rotateSensitivity: [1, 1],
          },
          label: {
            show: true, //是否显示市
            color: '#fff', //文字颜色
            fontSize: 14, //文字大小
          },
          itemStyle: {
            color: '#244a79',
            borderColor: '#fff',
            borderWidth: 1,
            opcity: 1,
          },
          emphasis: {
            itemStyle: { color: '#0373b4'},
          },
          regions: regionsData
        },
        series: [
          {
            type: 'map3D',
            map: mapCenter.echartMapName,
            viewControl: {// 须与geo3D中相同，
              distance: 110, //地图视角 控制初始大小
              rotateSensitivity: [1, 1],
            },
            itemStyle: {
              color: [1, 1, 1, 0]
            },
            emphasis: {
              label: {
                show: true, //是否显示市
                textStyle: {
                  color: 'white', //文字颜色
                  fontSize: 20, //文字大小
                },
              },
              itemStyle: {
                show: false,
                color: [1, 1, 1, 0]
              }
            },
            data: mapData
          }
        ]
      };


this.myChart.setOption(option);

// 添加点击事件
const _this = this;
this.myChart.on("click", (param) => {
  const newRegionsData = [];
  mapCenter.echartMap.features.forEach(item => {
    let color = '#244a79';
    if (param.name === item.properties.name) color = '#0373b4';
    newRegionsData.push({
      name: item.properties.name,
      label: {
        color: 'white',
      },
      itemStyle: {
        color: color
      }
    })
  })
  option.geo3D.regions = newRegionsData;
  _this.myChart.setOption(option)
});

//版本号
    "echarts": "^5.2.0",
    "echarts-gl": "^2.0.8",

该网站中有许多echart示例：https://www.isqqw.com/?t=map3D