Openlayers 3 view.fit（）使用OpenLayers 3.20+；

我为OpenLayers 3.20之前的版本编写了以下代码：

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添加一个新选项？

使用

ol.view#fit（）

的

duration

选项，您应该能够以更简单的方式实现相同的动画：

---

以上在OpenLayers 4.x中工作。

@zsero，我使用相同的功能缩放到层源的范围。我使用view.animate（）处理多达一半的路线，在回调函数中使用view.fit（）

我需要在view.fit（）上设置超时，否则会显示错误消息： 无法在ol.View.updateAnimations处读取null的属性“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);
}

---

你能更新这个答案让OL4反映吗？我很乐意让这一个被接受的答案，但它现在只兼容3.20。太好了！非常感谢你！只需添加一件事：在使用ol.Image.layer时，可以使用feature.getExtent（）而不是feature.getGeometry（）获得相同的结果，扩展参数设置与我的情况相同。干杯。OpenLayers 6.x版本仍在运行。谢谢你的评论。

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);
}