如何检测变焦结束？答案

【问题标题】：How can I detect a zoom end?如何检测变焦结束？
【发布时间】：2015-11-13 19:19:17
【问题描述】：

有没有一种很好的方法来检测地图的缩放动画何时结束？ OpenLayers 曾经在缩放完成后引发 'zoomend' 事件，但 OpenLayers 3 没有相应的事件。我目前正在使用以下方法，但充其量看起来很笨拙和脆弱。

function main() {
  var map = ...;
  map.getView().on('change:resolution', handleResolutionChange);
}
function handleResolutionChange() {
  var map = ...;
  map.once('moveend', handleMoveEnd);
}
function handleMoveEnd() {
  setTimeout(handleZoomEnd, 0);
}
function handleZoomEnd() {
  //Handle the 'Zoom end' event
}

【问题讨论】：

标签： openlayers-3

【解决方案1】：

您自己尝试过moveend 事件吗？？？我没有尝试过，但它也应该在 zoomend 上上升。 'change:resolution' 事件也没有记录。真的有用吗？？

试试下面的

var ghostZoom = map.getView().getZoom();
    map.on('moveend', (function() {
        if (ghostZoom != map.getView().getZoom()) {
            ghostZoom = map.getView().getZoom();
            console.log('zoomend');
        }
    }));

【讨论】：

moveend 本身也会在用户平移地图时引发。当地图完成缩放时它确实会被提升（这就是我毕竟使用它的原因），但当我不需要它时也是如此。 change:resolution 实际上是 ol.View 引发的事件。我输入问题时记错了
那么为什么map.getView().on('change:resolution', handleResolutionChange); 不满足您的情况？
change:resolution 在分辨率属性发生变化时立即引发，在动画完成之前
检查我的答案（用代码片段编辑）。应该适合你的情况

【解决方案2】：

我知道这个问题已经有一段时间了。我只是想分享我的想法。

    let isMapResolutionChanged;
    map.getView().on('change:resolution', () => {
        isMapResolutionChanged = true;
    });

    map.on('moveend', () => {
        if (isMapResolutionChanged) {
            console.log('fire moveend + zoomend')
        }
    });

【讨论】：

【解决方案3】：

只是想分享我的解决方案，因为我偶然发现了同样的问题：

let zoomend = function(evt) {
  alert('zoomend on resolution: ' + evt.map.getView().getResolution());    
  evt.map.once('moveend', function(evt) {
    zoomend(evt);
  });
};
map.getView().once('change:resolution', function(evt) {
  map.once('moveend', function(evt) {
    zoomend(evt);
  });
});

这里change:resolution 事件仅在缩放操作开始时触发一次，并在其完成时再次激活。你可以看看工作的fiddle。

【讨论】：