'addLayer' из неопределенных openlayers угловой 4

Question

Я хочу добавить маркер, нажав на карту в openlayers angular 6, я хочу использовать addLayer в своей функции, но она не работает?

 this.map.on('click', function (e) {
  console.log(e.coordinate);
  var lonlat = e.coordinate;
  console.log(lonlat);

  var lon = lonlat[0];
  var lat = lonlat[1];
  this.startMarker = new Feature({

    geometry: new Point(fromLonLat([lon, lat])),

  });


  this.vectorLayer = new VectorLayer({
    source: new VectorSource({
      features: [this.startMarker]
    }),

  });

  this.map.addLayer(this.startMarker);

});

Answer 1

Помимо привязки this и параметра addlayer(), геометрия объекта должна находиться в координатах вида.e.coordinate уже находится в координатах вида, поэтому вы можете использовать его напрямую

this.map.on('click', function (e) {

  this.startMarker = new Feature({
    geometry: new Point(e.coordinate),
  });

  this.vectorLayer = new VectorLayer({

    source: new VectorSource({
      features: [this.startMarker]
    }),

  });

  this.map.addLayer(this.vectorLayer);

}.bind(this));

Answer 2

Попробуйте использовать функцию стрелки, чтобы сохранить контекст this.

Пример кода должен выглядеть следующим образом:

this.map.on('click', (e) => {
  console.log('Keep the context of this.map: ', this.map);

  console.log(e.coordinate);
  var lonlat = e.coordinate;
  console.log(lonlat);

  var lon = lonlat[0];
  var lat = lonlat[1];
  this.startMarker = new Feature({
    geometry: new Point(fromLonLat([lon, lat])),
  });

  this.vectorLayer = new VectorLayer({
    source: new VectorSource({
      features: [this.startMarker]
    }),

  });

  this.map.addLayer(this.startMarker);

});