Reactjs 如何使用平滑过渡通过几何体更新标记位置？

我目前正在使用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线性过渡一样移动，让它看起来更真实？

使用计时器，你可以沿着新旧位置之间的直线将移动拆分为多个步骤，例如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);

---

您还可以基于flight动画示例

非常巧妙的技巧。我昨天才发现OpenLayers，所以它仍然让我惊讶/害怕它的功能是多么丰富。在更新50-100个标记时，此方法的性能如何？就性能而言，我的意思是最好有一个计时器，您可以一次更新需要它的每个标记的步骤，因此只需要对层进行一次重新渲染。对于每个标记，多个独立运行的计时器可能会影响性能。如果更新是独立的，则这将起作用。我目前正在接收阵列中的更新。我还是得想办法。