Vue3 中Echarts 自定义2d地图多层级拖拽

2D地图中通常设置多个geo来实现不同的阴影效果，一般我们设置roam:true 可以实现放缩拖拽功能，不过在边缘分层的地方进行放缩会导致地图分层放缩不一致的问题。

我们可以通过对series中的地图放缩监听去同步设置geo中的地图

chartIns.on("georoam", function(params:any) {
     let option = chartIns.getOption(); //获得option对象
        if (params.zoom != null && params.zoom != undefined) {
          console.log(params)
          //捕捉到缩放时
          option.geo.forEach((item:any,index:number)=>{
            option.geo[index].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
            option.geo[index].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
          })

          } else {
          //捕捉到拖曳时
          option.geo.forEach((item:any,index:number)=>{
            option.geo[index].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
          })
        }
        chartIns.setOption(option); //设置option
      });

对应的options中geo地图需要设置以下属性防止拖拽时卡顿及重影

geo: [
    {
      map: "yuhang",
      aspectScale: 1,
      zoom: 0.7,
      layoutCenter: ["50%", "50%"],
      layoutSize: "180%",
      show: true,
      roam: false,
      animate:false,
      throttle:0,
      animationDurationUpdate:0,
      scaleLimit:{
        min:0.4,
        max:2
      },
      select:{
        disabled : true
      },
      emphasis:{
        label:{
          show:false
        }
      },
      itemStyle: {
        normal: {
          borderColor: "#c0f3fb",
          borderWidth: 1,
          shadowColor: "#8cd3ef",
          shadowOffsetY: 10,
          shadowBlur: 120,
          areaColor: "transparent",
        },
      },
    },
    // 重影
    {
      type: "map",
      map: "yuhang",
      zlevel: -1,
      aspectScale: 1,
      zoom: 0.7,
      layoutCenter: ["50%", "51%"],
      layoutSize: "180%",
      roam: false,
      animate:false,
      throttle:0,
      animationDurationUpdate:0,
      scaleLimit:{
        min:0.4,
        max:2
      },
      select:{
        disabled : true
      },
      emphasis:{
        label:{
          show:false
        }
      },
      silent: true,
      itemStyle: {
        normal: {
          borderWidth: 1,
          // borderColor:"rgba(17, 149, 216,0.6)",
          borderColor: "rgba(58,149,253,0.8)",
          shadowColor: "rgba(172, 122, 255,0.5)",
          shadowOffsetY: 5,
          shadowBlur: 15,
          areaColor: "rgba(5,21,35,0.1)",
        },
      },
    },
    {
      type: "map",
      map: "yuhang",
      zlevel: -2,
      aspectScale: 1,
      zoom: 0.7,
      layoutCenter: ["50%", "52%"],
      layoutSize: "180%",
      roam: false,
      animate:false,
      throttle:0,
      animationDurationUpdate:0,
      scaleLimit:{
        min:0.4,
        max:2
      },
      select:{
        disabled : true
      },
      emphasis:{
        label:{
          show:false
        }
      },
      silent: true,
      itemStyle: {
        normal: {
          borderWidth: 1,
          // borderColor: "rgba(57, 132, 188,0.4)",
          borderColor: "rgba(58,149,253,0.6)",
          shadowColor: "rgba(65, 214, 255,1)",
          shadowOffsetY: 5,
          shadowBlur: 15,
          areaColor: "transpercent",
        },
      },
    },
    //  
  ],

还有一点需要注意对于echarts.init实例所赋值的变量一定要是正常变量即

<div class="echarts-box" ref="chartDom"></div>
let chartIns:any = null;
const chartDom = ref();
chartIns = echarts.init(chartDom.value!);

如果chartIns 采用 chartIns = ref()这种方式会导致放缩等功能十分卡顿