echarts 3d地图响应单击区域

echarts map 3D 地图
采用 echarts echarts-gl 版本实现 3D 地图并且响应鼠标单击区域返回当前区域信息，实现地图切换。


实现 3D 地图比较容易。只需要做一个 geo3D 配置即可，当然前提是你有了 echarts-gl 支持。

    script
      src="cdn/echarts/echarts.min.js"
      charset="utf-8"
    >/script>
    script
      src="cdn/echarts/echarts-gl.min.js"
      charset="utf-8"
    >/script>

geo3d 配置

geo3D: {
          regionHeight: 7,
          boxHeight: 1,
          map: this.mapName,
          show: true,
          roam: false,
          

          label: {
            show: true,
            distance: 1,
            color: "#fff",
            textStyle: {
              fontSize: 16,
            },
          },
          position: "bottom",
          itemStyle: {
            opacity: 1,
            color: "#388dff",
            borderWidth: 1,
            borderColor: "#66e2f6",
          },
          emphasis: {
            label: {
              distance: 10,
            },
            itemStyle: {
              color: "#6bd8ff",
              opacity: 0.9,
            },
          },
          viewControl: {
            alpha: 50,
            center: [0, 0, 0],
            minDistance: 100,
            maxDistance: 200,
            distance:
              this.mapName === "shannxi"
                ? 200
                : this.mapName === "xixian"
                ? 145
                : 90,
          },
          zlevel: 1,
        },

注册地图这块这里就不贴了。
接下来是如何实现点击响应。如果是 geo 设置为二维地图，则可以影响 echarts 的单击事件。但是如果 geo3d 就无法响应这个事件。
所以接下来我们通过 series 再给地图上方这只一个 3d 地图，这个时候，通过 geo3d 实现 3d 效果，通过 series 设置顶部可以响应鼠标点击。
当然这里的配置要和之前的 geo3d 大部分配置一致。

series: [
          {
            type: "map3D",
            map: this.mapName,
            regionHeight: 8,
            show: true,
            roam: false,
            label: {
              show: false,
            },
            itemStyle: {
              opacity: 0,
            },
            zlevel: 5,
            viewControl: {
              alpha: 50,
              center: [0, 0, 0],
              minDistance: 100,
              maxDistance: 200,
              distance:
                this.mapName === "shannxi"
                  ? 200
                  : this.mapName === "xixian"
                  ? 145
                  : 90,
            },
            silent: false,
          },
        ]

然后通过点击事件

this.myChart.on("click", (params) => {
        console.log(params, "---params");

来处理响应的点击事件。
我这里是在利用点击事件切换地图，实现地图下钻。
不过这里有个坑，就是如果 window.echarts.registerMap(“xian”, xian); 通过该方法实现切换地图，但是无法让地图的外层 series 实现变化，这时候，我们就需要通过注销地图，重新渲染地图来实现。

this.myChart.dispose();
this.myChart = window.echarts.init(this.$refs.map);
window.echarts.registerMap("xian", xian);

这就是我的处理办法。