Openlayers fit extent with bounce

Question

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.

ahocevar · Accepted Answer · 2017-06-28T08:53:50.490

4

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

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

edited Jun 28 '17 at 08:53

answered Jun 26 '17 at 19:44

ahocevar

5,448
15
29

Thanks, but I am not using a center, I want to fit the map to a certain extent. Just using the center does not put me at my ideal resolution like I would like. – Stephen Fricke Jun 26 '17 at 21:00
You can get the resolution for your desired extent with `ol.View#getResolutionForExtent`. I'm updating the code snippet in my answer. – ahocevar Jun 28 '17 at 08:50
Great, just what I needed. Thanks! – Stephen Fricke Jun 28 '17 at 14:17

Openlayers fit extent with bounce

1 Answers1

Linked