Using Openlayers (v6.1.1.) I'm trying to create simple FlyTo animation between several polygons. FlyTo animation works fine when there is somehow small distance between them but with increase in distance there is decrease in user experience.
On larger distance I'm just seeing fast panning through map in low zoom. I tried with ahocevar answer from this link but without desired effect.
As per instructions, I combined a center animation with two zoom animations and started them at the same time. Example:
let view = map.getView();
let extentOfPolygon = feature.getGeometry().getExtent();
let resolution = view.getResolutionForExtent(extentOfPolygon);
let zoom = view.getZoomForResolution(resolution);
let center = ol.extent.getCenter(extentOfPolygon);
view.animate({
center: center,
duration: duration
});
view.animate({
zoom: zoom - 1,
duration: duration / 2
}, {
zoom: zoom,
duration: duration / 2
});
This FlyTo animation works fine when polygons are in vicinity but with the increase in distance, FlyTo animation is transforming into fast panning across map.
I've created small app for testing purposes. When we click on list item map will animate and zoom to clicked field. In example when awesome, another and super field are in vicinity and FlyTo animations works as expected but when we click from super to epic field (which is in far south. Then map is just fast panning to location).
So, my question is this. Is it possible to achieve same FlyTo effect for polygons independently of polygon location (leaflet has this nicely set https://regionbound.com/leaflet-fly-demo)
Here is jsfiddle example: https://jsfiddle.net/Svinjica/1kjfp4ds/