`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

双图联动

联动不用共享视图对象,监听三个视图属性并互相赋值即可。

OpenLayers 10.3.1 · 更新 2026-10-28
`r`n
源码与运行效果
运行效果
`r`n

说明

示例建两幅独立地图,各自有 ol.View。对 center、resolution、rotation 三个属性注册监听,任一视图变化就把值写到另一视图。同步过程中用 syncing 标记阻断回环,避免两侧互相触发形成死循环。顶部读数取自左图,观察拖动右侧时数字同样变化。

操作结果
拖动左图右图同步平移
缩放右图左图跟着改变缩放级别
按住 Shift 旋转两侧旋转角度保持一致

要点

  • 同步 resolution 而不是 zoom,两级之间的映射才准确。
  • 标记位在赋值完成后立即复位,保证下一次同步照常进行。

两幅地图的容器尺寸不同会导致同一分辨率下比例尺不同,需要时按宽度换算。

`r`n
`r`n