OpenLayers3 - 动画 .fit 到特定程度

Posted 2023-03-25

【中文标题】OpenLayers3 - 动画 .fit 到特定程度

【英文标题】：OpenLayers3 - Animated .fit to a specific extent

【发布时间】：2016-05-23 09:37:10

【问题描述】：

我使用 OpenLayers3 创建了一个地图。我可以使用以下代码成功缩放到地图上的图层：

map.getView().fit(extent, map.getSize());

不过，我想要类似的动画方式。

我知道以下动画：

ol.animation.pan
ol.animation.zoom

通过使用这些我无法缩放到图层，使用 ol.animation.pan 我只能平移到一个点（而不是边界框），使用 ol.animation.zoom 我可以缩放到一个分辨率（并且不是边界框）。所以我正在寻找的是一个动画 .fit 以便我可以将动画缩放到一定程度。

任何关于我如何实现这一目标的建议将不胜感激:)

【问题讨论】：

我想我已经尝试过了，但我没有找到实现这一目标的方法。也许需要对库的拉取请求。

【参考方案1】：

从 v3.20.0 开始，OpenLayers 在ol.View#fit() 上有一个新的duration 选项。要获得适合范围的 1 秒动画，请将其设置为 1000：

// OpenLayers v3.20.x
view.fit(extent, size, duration: 1000);

另请注意，从 v3.21.0 开始，ol.View#fit() 的 API 已简化 - 它不再需要设置大小（除非页面上有多个地图）：

// OpenLayers >= v3.21.0
view.fit(extent, duration: 1000);

【参考方案2】：

我就是这样解决的

var view = map.getView()
var pan = ol.animation.pan( source: view.getCenter() );
var zoom = ol.animation.zoom( resolution: view.getResolution() );
map.beforeRender(pan, zoom);
view.fit(extent, map.getSize())