Добавьте на карту движущийся маркер, открывая слои с angular

Question

Я хотел бы добавить маркер / точку на карту из OpenLayers в сочетании с Angular8. Следующие коды дают мне карту:

export class SimulatieComponent implements AfterViewInit {

  veluwe = [5.8776, 52.1469]; 
  veluweWeb = fromLonLat(this.veluwe);

  map: Map;

  ngAfterViewInit() {
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: this.veluweWeb,
        zoom: 7
      }),
      controls: defaultControls().extend([
        new ZoomToExtent({
          extent: [
            813079.7791264898, 5929220.284081122,
            848966.9639063801, 5936863.986909639
          ]

Как добавить маркер / точку на карту, которая переход от начальной точки к конечной точке?

In ex : start a A, 324324 324234 move to B 254653, 435345 

Answer 1

Вы можете использовать ol-ext ol / featureAnimation / Path для анимации объекта вдоль пути. Смотрите пример: https://viglino.github.io/ol-ext/examples/animation/map.featureanimation.path.html

Answer 2

Первое, что вам нужно, это путь, обычно представляемый в виде линии или массива точек. Возможно, но не обязательно, первая точка линии - это ваша начальная точка, а последняя точка линии - ваша конечная точка.

После того, как у вас есть путь, вам нужен механизм для обработки времени и визуализации вашей отметки. на пути. Вы можете использовать функцию JavaScript setInterval для создания событий в миллисекунду X, когда вы обновите координаты метки до следующей точки в линии.

Другой подход может быть, используя визуализацию карты как интервальные события. У OL есть очень хороший пример, использующий этот подход Примеры OL - Marker Animation .