view.fit() 在 OpenLayers 3.20+ 中使用 view.animate()

Question

我有以下代码，为 3.20 之前的 OpenLayers 编写：

fitViewToFeature: function (viewer, feature) {
    var pan = ol.animation.pan({
      source: viewer.olView.getCenter(),
      duration: 1000
    })

    var zoom = ol.animation.zoom({
      resolution: viewer.olView.getResolution(),
      duration: 1000
    })

    viewer.olMap.beforeRender(pan, zoom)

    viewer.olView.fit(feature.getGeometry(), viewer.olMap.getSize(), {
      padding: [ 100, 100, 100, 100 ],
      constrainResolution: false,
      maxZoom: 4
    })
}

我的问题是如何将此函数转换为 OpenLayers 3.20 中引入的新 view.animate() 语法？

或者，我是否应该打开一个 GitHub 问题并请求将一个新选项添加到 view.animate？

Answer 1

您应该能够以更简单的方式实现相同的动画，使用 ol.View#fit() 的 duration 选项：

viewer.olView.fit(feature.getGeometry(), {
  duration: 1000
});

以上在 OpenLayers 中有效4.x。

Answer 2

@zsero，我使用相同的功能缩放到图层源的范围。我将 view.animate() 用于最多一半的路线，并在回调函数中使用 view.fit().

我需要在 view.fit() 上设置超时，否则我会收到一条错误消息：无法读取 ol.View.updateAnimations_

处的空属性 'length'

var origine = view.getCenter();
var destination = ol.extent.getCenter(extent);
var middleDestination = [(origine[0] + destination[0]) / 2, (origine[1] + destination[1]) / 2];
var viewFit = function() {
    setTimeout( function() {
        view.fit(extent, map.getSize(), {
            duration: duration / 2,
            padding: [ 64, 10, 10, 328 ],
            constrainResolution: false
        })
    }, 0)
}
var animation = function() {
    view.animate({
        center: middleDestination,
        duration: duration / 2
    });
    view.animate({
        zoom: zoom - backZoom,
        duration: duration / 2
    }, viewFit);
}

view.fit() 在 OpenLayers 3.20+ 中使用 view.animate()

view.fit() using view.animate() in OpenLayers 3.20+

openlayers-3