经纬志
首页 / OpenLayers / 使用示例

地图跨容器迁移

同一张地图在两个并排容器之间迁移,缩放级别、中心点和图层都不会重建。

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

说明

map.setTarget() 只改变地图挂载的元素,不触发图层或视图重建。按钮在 map1 与 map2 之间切换目标,并在当前容器上加深色描边,便于确认地图实例落在哪一侧。

操作结果
点击「迁移到右侧容器」地图整体移动到右侧,中心点与缩放不变
在任一容器内缩放迁移后保留新的视图状态
再次点击按钮地图回到左侧容器

容器必须始终存在且尺寸可测;迁移前先把容器显示出来,否则 updateSize() 拿不到有效宽高。