如何在openlayers 4中显示实时数据点，角度5

Question

I want to update live data points in my map. I get every second a new wkt-point through a Service. But every point should stay on the map, so that i can follow the wkt-points.
At the moment, i can only show one static point in my map:

import {Component, OnInit, AfterViewInit, ViewEncapsulation} from '@angular/core';
import {PointService} from "../../pointservice.service";

import * as ol from 'openlayers';


@Component({
  selector: 'olmap',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit {

  layername: string;
  layerurl: string;

constructor(private mapService: PointService){}

ngAfterViewInit() {
    setTimeout (() => {

      const raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });

      const wkt = 'POINT(20, 30)';

      const format = new ol.format.WKT();

      const feature = format.readFeature(wkt, {
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:3857'
      });

      const vector = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [feature]
        })
      });


      let map = new ol.Map({
        target: this.mapId2,
        layers: [raster, vector,
          new ol.layer.Tile({
            source: new ol.source.OSM(),
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([6.661594, 50.433237]),
          zoom: 2,
        })
      }); },500)}

I have to use the AfterViewInit lifecycle hook with the timeout of 500ms, for some other reasons.

Perhaps the best way would be to define a own method to show the route of the wkt-points?

Mi idea is the observe my Data-Service, so that the points are autoupdating every second, but how could i implement that the points showing up every second in openlayers???

Answer 1

Just define an array of features as a member of your class:

private arrayOfFeatures: ol.Feature[] = [];

The modify ngAfterViewInit like this:

ngAfterViewInit() {
setTimeout (() => {

  const raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });


  const vector = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: this.arrayOfFeatures
    })
  });


  let map = new ol.Map({
    target: this.mapId2,
    layers: [raster, vector,
      new ol.layer.Tile({
        source: new ol.source.OSM(),
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([6.661594, 50.433237]),
      zoom: 2,
    })
  }); },500)}

and finally create a function to add a single feature:

readSingleFeature( wkt: string) {
  const format = new ol.format.WKT();

  const feature = format.readFeature(wkt, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857'
  });

this.arrayOfFeatures.push( feature );

}

Then you just have to observe your data service and when you get a string, just call readSingleFeature .