openlayers - 如何使两个openlayers地图同步工作

Question

我在我的页面中创建了两个 openlayer 地图，现在我希望它们同步工作。

例如，一张地图的中心或缩放比例发生了变化，然后另一张地图也相应地改变了它。

反之亦然。

我应该在地图上注册哪个活动？

Answer 1

这确实是可能的，因为我刚刚做到了。您需要从正在平移或缩放的地图中捕获“moveend”和“move”事件（在缩放结束时触发 moveend，但为了安全起见，您也可以捕获“zoomend”）。如果您使用父地图作为上下文来捕获这些，那么您可以获得新的地图中心。请记住，如果正在使用导航控件并且使用鼠标完成缩放，则地图中心可能会在缩放地图时发生变化。然后使用 moveTo 方法 (childmap.moveTo().

我选择了 moveTo 方法，因为（尽管没有很好的记录）这是在任何地图上的任何平移或缩放事件中最终都会调用的方法。顺便说一句，调用 moveTo 还会在子地图上触发 'move'、'moveend' 事件。

如果您使用 json 制作地图集合并使用 jQuery，实际代码将如下所示（我假设您知道如何在 OpenLayers 中捕获地图事件）；

var newCentre = zoomedMap.getCenter();

$.each(maps, function (ind, map) {
            if (map !== zoomedMap) map.moveTo(newCentre, newZoom);
        });

其中 maps 是我的地图集合，zoomedMap 是用户实际触发平移或缩放事件的地图（我称它为 zoomeMap 但它也可以很容易地称为 pannedMap），并且（显然）map 是需要移动的集合。

在我确定上面的代码之前，我玩了一会儿。这里的优点是 $.each 不等待 moveTo 函数返回，所以你会得到一个看起来更漂亮的同步。当然，如果您只同步两张地图，这不会成为真正的问题。

很抱歉在提出问题后这么长时间才发布此消息，但也许它会帮助任何新的搜索者。