Объединение функций расширенного позиционирования вида и анимации вида

Question

Некоторое время назад я опубликовал вопрос в gis.stackexchange, но для меня это не очень-то решило.Попытка здесь сейчас.

Я пытаюсь объединить две функции, которые отображаются как образцы OL, Расширенное позиционирование вида и Просмотр анимации .Я могу успешно изменить вид с помощью метода анимации, но я не могу исправить масштаб, как в методе Advanced View Posttioning.Я использую эти методы, чтобы изменить вид некоторых растров, загруженных в OL.Моя проблема связана только с уровнем масштабирования , как мне настроить его на растр , который я использую?Я считаю, что мне нужно получить растровый экстент (уже сделал это) и каким-то образом рассчитать и связать с разделом масштабирования в функции flyTo ().

Версия OL: 5.3

Функция I 'm для анимации:

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

Некоторые ссылки, которые связаны, но не помогли мне (большинство из них используют функцию fit(extent). Я пытался использовать ее, но она отменяет функцию animate().В вопросе gis.stackexchange, который я связал, пользователь @Mike смог объединить функции, но он не работал с растровым экстентом):

• OpenLayers 4 - подходит для экстентавыбранные объекты
• OpenLayers animate getView (). fit ()
• Дрожания карты Openlayers при динамическом центрировании анимации движения объектов
• Openlayers соответствуют экстенту с отскоком
• view.fit () с использованием view.animate () в OpenLayers 3.20 +
• OpenLayers 3: Увеличить карту до координат в массиве

Answer 1

Рабочий фрагмент на основе второго редактирования 15 февраля ответа на исходный вопрос

  proj4.defs("EPSG:31982","+proj=utm +zone=22 +south +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
  if (ol.proj.proj4 && ol.proj.proj4.register) { ol.proj.proj4.register(proj4); }

  var view = new ol.View({
    center: [0, 0],
    zoom: 1
  });
  var map = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    target: 'map',
    controls: ol.control.defaults({
      attributionOptions: {
        collapsible: false
      }
    }),
    view: view
  });

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

    var oldCenter = view.getCenter();
    var oldZoom = view.getZoom();
    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});
    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);

  .mapcontainer {
    position: relative;
    margin-bottom: 20px;
  }
  .map {
    width: 1000px;
    height: 600px;
  }
  div.ol-zoom {
    top: 178px;
    left: 158px;
  }
  div.ol-rotate {
    top: 178px;
    right: 58px;
  }
  .map div.ol-attribution {
    bottom: 30px;
    right: 50px;
  }
  .padding-top {
    position: absolute;
    top: 0;
    left: 0px;
    width: 1000px;
    height: 170px;
    background: rgba(255, 255, 255, 0.5);
  }
  .padding-left {
    position: absolute;
    top: 170px;
    left: 0;
    width: 150px;
    height: 400px;
    background: rgba(255, 255, 255, 0.5);
  }
  .padding-right {
    position: absolute;
    top: 170px;
    left: 950px;
    width: 50px;
    height: 400px;
    background: rgba(255, 255, 255, 0.5);
  }
  .padding-bottom {
    position: absolute;
    top: 570px;
    left: 0px;
    width: 1000px;
    height: 30px;
    background: rgba(255, 255, 255, 0.5);
  }
  .center {
    position: absolute;
    border: solid 1px black;
    top: 490px;
    left: 560px;
    width: 20px;
    height: 20px;
  }

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div class="mapcontainer">
  <div id="map" class="map"></div>
  <div class="padding-top"></div>
  <div class="padding-left"></div>
  <div class="padding-right"></div>
  <div class="padding-bottom"></div>
  <div class="center"></div>
</div>
<button id="flytoparqueorion">Fly to Parque Orion</button>