Merge Advanced View Positioning and View Animation functions

Question

I'm trying to merge two functions that are displayed as OL's samples, the Advanced View Positioning and the View Animation. I can successfully change the view with the animation method, but I can't fix the zoom as in the Advanced View Postitioning method. I'm using these methods to change the view of some rasters loaded in OL. My problem is related only with the zoom level, how can I make it fit to the raster that I'm using? I believe that I need to get the raster extent (already did it) and somehow calculate and link to the zoom section in the flyTo() function.

OL version: 5.3

Function I'm using for the animation:

//This is one of the locations I using with the View Animation method
var randomLocation = transform(getCenter([565280.904542, 6924581.621580, 565319.267400, 6924554.342636]), 'EPSG:31982', 'EPSG:3857');

function flyTo(location, done) {
  var duration = 3000;
  var zoom = view.getZoom();
  var parts = 2;
  var called = false;
  function callback(complete) {
    --parts;
    if (called) {
      return;
    }
    if (parts === 0 || !complete) {
      called = true;
      done(complete);
    }
  }
  view.animate({
    center: location,
    duration: duration
  }, callback);
  view.animate({
    zoom: zoom - 2,
    duration: duration / 2
  }, {
    zoom: zoom,
    duration: duration / 2
  }, callback);
}

Some links that are related but did not help me (most of them use the fit(extent) function. I tried to use it but it cancels the animate() function):

• Open Layers 4 fit to extent zoom too much out
• https://stackoverflow.com/questions/49746970/openlayers-4-fit-to-extent-of-selected-features
• OpenLayers-3 setting zoom so layers fit in map window
• https://stackoverflow.com/questions/42369647/openlayers-animate-getview-fit
• https://stackoverflow.com/questions/49361669/openlayers-map-jitters-on-dynamic-centering-of-feature-movement-animation
• OpenLayers - Setting View Correctly Extent GEOJSon
• https://stackoverflow.com/questions/44763661/openlayers-fit-extent-with-bounce
• https://stackoverflow.com/questions/41190146/view-fit-using-view-animate-in-openlayers-3-20
• https://stackoverflow.com/questions/38291471/openlayers-3-zoom-map-to-coordinates-in-array
• View Animation of OpenLayers

Answer 1

I've experimented with the example and found an easy way to do it. Use .fit to get the desired final outcome, save the resulting center and zoom, then immediately go back to the starting point. You can then flight animate the same movement. Any of the other animation examples should also work.

  var flytolausanne = document.getElementById('flytolausanne');
  flytolausanne.addEventListener('click', function() {

    var feature = source.getFeatures()[1];
    var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
    var oldCenter = view.getCenter();
    var oldZoom = view.getZoom();
    view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
    var newCenter = view.getCenter();
    var newZoom = view.getZoom();
    view.setCenter(oldCenter);
    view.setZoom(oldZoom);

    flightZoom = Math.min(oldZoom, newZoom) - 2;
    zoomUp = oldZoom - flightZoom;
    zoomDown = newZoom - flightZoom;

    var duration = 2000;
    var parts = 2;
    var called = false;
    function callback(complete) {
      --parts;
      if (called) {
        return;
      }
      if (parts === 0 || !complete) {
        called = true;
        //done(complete);
      }
    }
    view.animate({
      center: newCenter,
      duration: duration
    }, callback);
    view.animate({
      zoom: flightZoom,
      duration: duration * zoomUp / (zoomUp + zoomDown)
    }, {
      zoom: newZoom,
      duration: duration * zoomDown / (zoomUp + zoomDown)
    }, callback);

  }, false);

Just as someone has entered the coordinates for the outline of Switzerland in switzerland.geojson in the example you will need to define your own extent. It you want to use same the extent as above you would simply replace the minimum resolution fit with constrain resolution for a best fit:

var extent = ol.proj.transformExtent([565280.904542, 6924581.621580, 565319.267400, 6924554.342636], 'EPSG:31982', 'EPSG:3857');
view.fit(extent, {padding: [170, 50, 30, 150], constrainResolution: false});