首页 / OpenLayers / 使用示例
`r`n 双图联动
联动不用共享视图对象,监听三个视图属性并互相赋值即可。
`r`n
源码与运行效果
说明
示例建两幅独立地图,各自有 ol.View。对 center、resolution、rotation 三个属性注册监听,任一视图变化就把值写到另一视图。同步过程中用 syncing 标记阻断回环,避免两侧互相触发形成死循环。顶部读数取自左图,观察拖动右侧时数字同样变化。
| 操作 | 结果 |
|---|---|
| 拖动左图 | 右图同步平移 |
| 缩放右图 | 左图跟着改变缩放级别 |
| 按住 Shift 旋转 | 两侧旋转角度保持一致 |
要点
- 同步
resolution而不是zoom,两级之间的映射才准确。 - 标记位在赋值完成后立即复位,保证下一次同步照常进行。
两幅地图的容器尺寸不同会导致同一分辨率下比例尺不同,需要时按宽度换算。