javascript - 如何在 OpenLayers 中创建两个遥远的多边形之间的飞行动画

Question

使用 Openlayers (v6.1.1.) 我正在尝试在多个多边形之间创建简单的 FlyTo 动画。当它们之间的距离很小时，FlyTo 动画效果很好，但随着距离的增加，用户体验会下降。

在较大的距离上，我只是看到以低变焦快速平移 map 。我尝试过 ahocevar来自this link的回答但没有达到预期的效果。

按照说明，我将一个中心动画与两个缩放动画组合在一起，并同时启动它们。示例:

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

当多边形在附近时，此 FlyTo 动画效果很好，但随着距离的增加，FlyTo 动画会转变为在 map 上快速平移。

我创建了一个小应用程序用于测试目的。当我们单击列表项时， map 将动画并缩放到单击的字段。例如，当很棒时，另一个 super 场就在附近，FlyTo 动画会按预期工作，但是当我们从 super 场点击到史诗场时(位于最南端。然后 map 会快速平移到位置)。

所以，我的问题是这样的。是否可以为多边形实现相同的 FlyTo 效果，而与多边形位置无关(传单有这个很好的设置 https://regionbound.com/leaflet-fly-demo )

这是 jsfiddle 示例: https://jsfiddle.net/Svinjica/1kjfp4ds/

Answer 1

我认为您需要对缩放方式进行更多改进。例如，缩小到足够的高度，以便在最高海拔处都可以看到起点和目的地。您可以通过计算距离并除以 map 宽度来做到这一点。对整体上下变化的持续时间进行一些调整，但不要调整太多，并按比例划分上下持续时间。如果当前分辨率已经大于计算的峰值高度分辨率，要减少初始持续时间，持续时间的 100% 应该向下，并且您还应该通过将其拟合到矢量源范围 https://jsfiddle.net/b4mL9s28/8/ 来打开靠近要素所在位置的 map 。

let geojsonData = new ol.format.GeoJSON().readFeatures(fieldData, {
  featureProjection: 'EPSG:3857'
});
let vectorSource = new ol.source.Vector({
  features: geojsonData
});

let vectorLayer = new ol.layer.Vector({
  source: vectorSource
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 4
  })
});

map.getView().fit(vectorSource.getExtent());

const duration = 2000;

var featureListElement = document.getElementById("vectorFeatures");

var features = vectorLayer.getSource().getFeatures();
for (let feature of features) {
  let aElement = document.createElement("a");
  aElement.classList.add("list-group-item", "list-group-item-action");
  featureListElement.appendChild(aElement);
  aElement.innerHTML = feature.get("Name");
  aElement.onclick = function() {

    let view = map.getView();
    var extentOfPolygon = feature.getGeometry().getExtent();
    let resolution = view.getResolutionForExtent(extentOfPolygon);
    var center = ol.extent.getCenter(extentOfPolygon);
    var currentCenter = map.getView().getCenter();
    var currentResolution = map.getView().getResolution();
    var distance = Math.sqrt(Math.pow(center[0] - currentCenter[0], 2) + Math.pow(center[1] - currentCenter[1], 2));
    var maxResolution = Math.max(distance/ map.getSize()[0], currentResolution);
    var up = Math.abs(maxResolution - currentResolution);
    var down = Math.abs(maxResolution - resolution);
    var adjustedDuration = duration + Math.sqrt(up + down) * 100;

    view.animate({
      center: center,
      duration: adjustedDuration
    });
    view.animate({
      resolution: maxResolution,
      duration: adjustedDuration * up / (up + down)
    }, {
      resolution: resolution,
      duration: adjustedDuration * down / (up + down)
    });
  }
}