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

发布于 2022-09-11 18:23:53 字数 1582 浏览 17 评论 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
      }]
   }

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

≈。彩虹 2022-09-18 18:23:53

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文