Openlayers具有弹跳的范围 [英] Openlayers fit extent with bounce

问题描述

我试图在两个范围之间进行动画处理，并在动画中间进行缩放，以便在相距较远的位置之间移动时创建弹跳或飞行效果.现在，我正在使用view.fit(extent，{duration:2000}).问题是在动画过程中缩放根本没有改变.当我从一个范围平移到另一个相距较远的范围时，您只会看到一堆瓷砖以非常低的缩放水平飞过.

I am attempting to animate between two extents, with an increase in zoom during the middle of the animation, to create a bouncing or flying effect when going between locations which are far apart. Right now I am using view.fit(extent, {duration: 2000}). The problem is the zoom does not change at all during the animation. When I am panning from one extent to another which are far apart, you just see a bunch of tiles flying by at a very low zoom level.

推荐答案

要获得飞行效果，您需要将center动画与两个zoom动画组合在一起，然后同时启动它们.您可以根据需要的范围(myExtent)计算中心并缩放.像

For a fly effect, you'll want to combine a center animation with two zoom animations, and start those at the same time. You can calculate the center and zoom from your desired extent (myExtent). Something like

    var resolution = view.getResolutionForExtent(myExtent);
    var zoom = view.getZoomForResolution(resolution);
    var center = ol.extent.getCenter(myExtent);
    view.animate({
      center: center,
      duration: duration
    });
    view.animate({
      zoom: zoom - 1,
      duration: duration / 2
    }, {
      zoom: zoom,
      duration: duration / 2
    });

类似的东西在官方动画示例中也显示为飞往伯尔尼"( http://openlayers.org/en/latest/examples/animation.html ).

Something similar is also shown as "Fly to Bern" in the official animation example (http://openlayers.org/en/latest/examples/animation.html).

这篇关于Openlayers具有弹跳的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！