Невозможно вызвать функцию машинописи внутри функции OpenLayers

Question

У меня проблема с использованием OpenLayers с TypeScript в Angular. У меня есть прослушиватель событий для моей карты ol

  this.map.on('click', function (e) {
      let x = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')
      this.addMarker(x[0], x[1]);
    });

x [0] и x [1] - мои значения широты и долготы. Если я вызову функцию addMarker, при нажатии на карту я получу сообщение об ошибке:

ERROR TypeError: this.addMarker is not a function
at Map.<anonymous> (map.component.ts:90)
at Map.push.../node_modules/ol/events/Target.js.Target.dispatchEvent (Target.js:113)
at Map.push.../node_modules/ol/PluggableMap.js.PluggableMap.handleMapBrowserEvent (PluggableMap.js:871)
at MapBrowserEventHandler.push.../node_modules/ol/events/Target.js.Target.dispatchEvent (Target.js:113)
at MapBrowserEventHandler.push.../node_modules/ol/MapBrowserEventHandler.js.MapBrowserEventHandler.emulateClick_ (MapBrowserEventHandler.js:97)
at MapBrowserEventHandler.push.../node_modules/ol/MapBrowserEventHandler.js.MapBrowserEventHandler.handlePointerUp_ (MapBrowserEventHandler.js:148)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)

Это мой метод addMarker:

addMarker(lon, lat) {
  let marker = new Feature({
    geometry: new Point(transform([lon + 0.01, lat], 'EPSG:4326', 'EPSG:3857'))
  });
  this.source.addFeature(marker);
}

Я не знаю, как это исправитьпроблема или если есть обходной путь.

Я надеюсь, что вы можете помочь мне здесь.

Answer 1

Проблема здесь в том, что вы используете синтаксис. Используйте этот код в this.map. Вы можете сделать две вещи.

1. Использовать функцию стрелки (рекомендуется).

this.map.on('click', (e) => {
    const x = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')
    this.addMarker(x[0], x[1]);
});

Сохраните this в переменной и затем используйте эту переменную.

const _that = this;
this.map.on('click', function(e) {
    const x = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')
    _that.addMarker(x[0], x[1]);
});

Причина в том, что область действия this. когда вы создаете функцию типа function(){}, это относится к этой функции, но когда вы используете функцию arrow, this будет ссылаться на class.

Answer 2

Сам нашел решение: Изменить это:

 this.map.on('click', function (e) {
      let x = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')
      this.addMarker(x[0], x[1]);
    });

На:

this.map.on('click', (e) => {
      let x = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')
      this.addMarker(x[0], x[1]);
    });

Answer 3

Вам необходимо сохранить ссылку 'this' на другую переменную перед вызовом метода.

const self = this;
this.map.on('click', function (e) {
      let x = transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')
      self.addMarker(x[0], x[1]);
});

В обработчике события click область действия этого изменения. Следовательно, addMarker был неопределенным.