echarts 3d地图响应单击区域

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


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

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

geo3d配置

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

          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);

这就是我的处理办法。