OpenLayers 3：Sync/Unsync 不同的地图事件

Question

假设我在屏幕上有 N 个不同的地图，我希望能够基于条件，假设来自复选框或不同控件的值能够同步所有地图事件（zoom/pan/rotation) 并相应地取消同步。这可以在 OpenLayers 3 中使用本机代码实现吗？

Answer 1

您可以通过监听事件并将其更改设置到其他地图来同步地图。我写了一个 working example，将其用作每个地图视图的 change:center、change:resolution 和 change:rotation 事件的侦听器：

function(evt){
    var type = evt.type.split(':');
    if (type[0] === 'change' && type.length === 2){
        var attribute = type[1];
        maps.forEach(function(map){
            var value = evt.target.get(attribute);
            if (map.getView().get(attribute) !== value){
                map.getView().set(attribute, value);
            }
        });
    }
}

Answer 2

我正在处理一个 WMS 层相当重的项目，并遇到了 Alvin 解决方案的问题。对于第一个地图，OL 在请求更新的 WMS 层之前等待任何交互结束。但对于第二张地图，它似乎将函数触发的每个步骤视为单独的交互，因此在每个步骤生成单独的 WMS 图层请求。就我而言，这严重影响了性能。

我想出了一个折衷的解决方案，等待交互结束，然后为第二张地图制作动画以匹配第一张地图。这是第一次尝试，可能会有所改进：

// attributes to synchronise between maps
var synchedAttributes = ['resolution', 'center']

// call this on moveend
var syncPanZoom = function(maps, evt){

  maps.forEach(function(map){

    synchedAttributes.forEach(function(attribute) {

      var value = evt.target.getView().get(attribute);

      if (map.olmap.getView().get(attribute) !== value){
        var animateObject = {};
        animateObject[attribute] = value;
        animateObject.duration = 500;
        map.olmap.getView().animate(animateObject)
      }

    });

  });

};

OpenLayers 3：Sync/Unsync 不同的地图事件

OpenLayers 3: Sync/Unsync Different Maps Events

openlayers-3