如何通过方法添加标记，openlayers 4，angular 4

Question

I want to add live position markers in my map.
As first step i just want to show one static point (lat, lon) or marker in my map, definded by the addMarker method in my code.
Here is my code:

import {Component, OnInit, AfterViewInit, ViewEncapsulation, Input, ElementRef, ViewChilds} from '@angular/core';
import { WmslayerService} from './wmslayer.service';
import { MapService} from './map.service';
import {AddwmslayerService} from '../../menue/addlayer/formlayer/addwmslayer.service';


import * as ol from 'openlayers';


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


  iconFeatures = [];
  layername: string;
  layerurl: string;

  mapId2: string;
  mapIndex: number;
  layerName: string;

  layer = [];
  layers = [];


  constructor(private mapService: MapService, private wmslayerService: WmslayerService,
              private addLayerService: AddwmslayerService, private tempdatagiaService: TempdatagiaService,
              private geomqttService: GeomqttService) {}


ngAfterViewInit() {
    setTimeout (() => {

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

      //// for loop, to add some layer

      for (let layer of this.wmslayerService.layer) {

        console.log(layer);

        let examplelayer = new ol.layer.Tile({
          source: new ol.source.TileWMS({
            url: layer.layerurl,
            params: {
              'LAYERS': layer.layername,
              'TILED': true
            },
            projection: 'EPSG:4326',
            serverType: 'geoserver'
          })
        });
        this.layers.push(examplelayer);
        map.addLayer(examplelayer);
      }
      this.mapIndex = this.mapService.addMap(map);
      this.layername = this.layerName;
      console.log(this.mapIndex);
    },300)}

// -- addlayer dynamicly--

  addNewLayer(url: string, name: string) {
    console.log(name);
    let addedlayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        url: url,
        params: {
          'LAYERS': name,
          'TILED': true
        },
        projection: 'EPSG:4326'
      })
    });
    this.layers.push(addedlayer);
    this.mapService.getMap(this.mapIndex).addLayer(addedlayer);
  }



  addMarker(lon: string, lat: string) {
    console.log(lat);
    console.log(lon);

    var iconFeatures = [];

    var iconFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326',
        'EPSG:3857')),
      name: 'Null Island',
      population: 4000,
      rainfall: 500
    });

    iconFeatures.push(iconFeature);

    var vectorSource = new ol.source.Vector({
      features: iconFeatures //add an array of features
    });

    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
      }))
    });


    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyle
    });

    map.addLayer(vectorLayer);

  }
}

The last line map.addLayer(vectorLayer); is not working.
The addMarker method will be triggered by a click event.
How could i get the method working?
Has someone a better idea or a stable solution to show live datapoints in an openlayers 4 map?

Answer 1

You do not need to create a new layer every time you want to show an additional marker. It's usually easier to create a single "marker layer" and just add features to it's source. All you need is keeping a reference to the layer's source and call addFeature on it.

Coordinates are not strings, but decimals: addMarker(lon: decimal, lat: decimal)

 const markerSource = new ol.source.Vector(); var markerStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png' })) }); let map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }), new ol.layer.Vector({ source: markerSource, style: markerStyle, }), ], view: new ol.View({ center: ol.proj.fromLonLat([6.661594, 50.433237]), zoom: 3, }) }); function addMarker(lon, lat) { console.log('lon:', lon); console.log('lat:', lat); var iconFeatures = []; var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')), name: 'Null Island', population: 4000, rainfall: 500 }); markerSource.addFeature(iconFeature); } map.on('singleclick',function(event){ var lonLat = ol.proj.toLonLat(event.coordinate); addMarker(lonLat[0], lonLat[1]); }); 

 #map { /* just for testing purposes */ width: 100%; min-width: 240px; max-width: 500px; height: 200px; } 

 <link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/> <script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script> <button onclick="addMarker(8.54, 47.37)">add marker at 8.54, 47.37</button> <div id="map"></div>