我有以下代码,为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?
您应该能够以更简单的方式实现相同的动画,使用duration
的ol.View#fit()
选项:
viewer.olView.fit(feature.getGeometry(), {
duration: 1000
});
以上工作在OpenLayers 4.x中。
@zsero,我使用相同的函数来缩放图层源的范围。我使用view.animate()最多一半的路由,在回调函数中我使用view.fit()。
我需要在view.fit()上设置setTime,否则我有一条错误消息:无法在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);
}