Как обновить позицию маркера с помощью геометрии с плавным переходом? - PullRequest
Новая
       5

Как обновить позицию маркера с помощью геометрии с плавным переходом?

0 голосов
/ 27 февраля 2019

В настоящее время я работаю с приложением 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», чтобы придать ему более реалистичный вид?

1 Ответ

0 голосов
/ 27 февраля 2019

Используя таймер, вы можете разбить движение на шаги по линии между старыми и новыми позициями, например, за 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

...