如何通过几何图形更新标记位置并平滑过渡？

Question

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

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

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 linear transition" 一样移动，让它看起来更逼真？

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

如何通过几何图形更新标记位置并平滑过渡？

How do I update marker position via geometry, with a smooth transition?

reactjs

openlayers

openlayers-5