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

bluebloodsky
  • 0
新手上路,请多包涵

题目描述

我在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
      }]
   }

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

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

回复
阅读 4.8k
1 个回答
宣传栏