如何通过几何形状更新标记位置，并通过平滑的过渡更新

Question

我当前正在使用ReactJS Nodejs应用程序，试图集成OpenLayers。我需要实时（通过socket.io）更改标记的GPS位置。

到目前为止，我想出了此代码：

this.map = new Map({
        target: "map",
        layers: [
            new TileLayer({
                source: new XYZ({
                    attributions: 'Tiles © <a href="https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer">ArcGIS</a>',
                    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
                })
            }),
        ],
        view: new View({
            center: fromLonLat([-8.455826, 40.168307]),
            rotation: 1.1344640138,
            easing: 0.5
        })
    });
    var vectorSource = new VectorSource({});
    var markersLayer = new VectorLayer({
        source: vectorSource,
    });
    this.map.addLayer(markersLayer);
    var point1 = new Point(
        fromLonLat([-8.455826, 40.168307])
    );
    var point2 = new Point(
        fromLonLat([-8.456819, 40.166388])
    );
    var marker = new Feature({
        geometry: point1,
        name: "My point",
    });
    vectorSource.addFeature(marker);
    var style = new Style({
        image: new CircleStyle({
            radius: 7,
            fill: new Fill({color: 'black'}),
            stroke: new Stroke({
                color: 'white', width: 2
            })
        })
    });
    marker.setStyle(style);
    setTimeout(function () {
        marker.setGeometry(point2);
        marker.getGeometry().translate(40, -40);
    }, 3500);

标记的移动，但是过渡是瞬间发生的。有没有办法使其像" CSS线性过渡"一样移动以使其更现实？

Answer 1

使用计时器，您可以将移动沿旧位置和新位置之间的界线分为台阶，例如对于100个10毫秒步骤

var line = new LineString([oldCoordinates, newCoordinates])];
var step = 0;
var key = setInterval( function() {
  if (step < 100) {
    step++;
    marker.setGeometry(new Point(line.getCoordinateAt(step/100)));
  } else {
    clearInterval(key);
  }
}, 10);

您也许还可以在飞行动画示例中基于某些内容https://openlayers.org/en/latest/examples/flight-animation.html