echart 多个geo如何实现缩放移动同步？

Question

题目描述

我在echart里用到了两个地图，一个省级和一个市级，省级地图可认为是背景地图，在市级地图上打点，当鼠标悬浮在地图上方进行缩放移动时，如何保证两个地图的同步？

题目来源及自己的思路

单独用市级地图感觉太单调，就把省级地图进行放大作为市级地图的背景，现在问题是怎么实现两个地图的同步缩放。
思路：

  1.roam设置为false，了解echart内部地图缩放的函数，自定义鼠标滚动及移动方法，事件中同时调用多个地图的缩放移动方法
  2.当任意地图缩放时，触发georoam事件，在事件内部分发给其他地图
  3.地图的缩放针对的是鼠标悬浮着的地图，鼠标悬浮时，通过某种方式使echart选中多个地图

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

  let Option = {
    geo: [
      {
        name: "hubei",
        map: "hubei",
        center: [114.2, 30.5],
        layoutCenter: ["50%", "60%"],
        layoutSize: "420%",
        selectedMode: "single",
        roam: true,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: "#2da1e2"
            }
          }
        },
        itemStyle: {
          normal: {
            borderColor: "#3fdaff",
            color: "#032338"
          }
        },
        silent: true
      },
      {
        name: "wuhan",
        map: "wuhan",
        center: [114.2, 30.5],
        layoutCenter: ["49.6%", "60.4%"],
        layoutSize: "100%",
        selectedMode: "single",
        roam: true,
        label: {
          normal: {
            show: false,
            textStyle: {
              color: "white"
            }
          }
        },
        itemStyle: {
          normal: {
            borderColor: "#3fdaff",
            color: "#006497"
          }
        },
        silent: true
      }]
   }

你期待的结果是什么？实际看到的错误信息又是什么？

希望在市级地图缩放移动时，省级地图同步缩放移动，实际上它们是分别移动的

Answer 1

我解决了这个，监听georoam事件，zoom和center保持同步就可以了。

myChart.on('georoam', (params) => {
    let myOption = myChart.getOption()
    if (params.zoom != null) {
      //捕捉到缩放时
      myOption.geo.slice(1).forEach((geo) => {
        geo.zoom = myOption.geo[0].zoom
        geo.center = myOption.geo[0].center
      })
    } else {
      //捕捉到拖曳时
      myOption.geo.slice(1).forEach((geo) => {
        geo.center = myOption.geo[0].center
      })
    }
    myChart.setOption(myOption)
  })

Answer 2

请问题主后来解决这个问题了嘛，我最近也遇到这个问题了