无法在 OpenLayers 函数中调用打字稿函数

Question

我在 Angular 中使用带有 TypeScript 的 OpenLayers 时遇到问题。我的 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' 的引用存储到另一个变量中。

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

在单击事件处理程序中，this 的范围发生了变化。因此，addMarker 未定义。

Answer 2

这里的问题是您使用的语法。在 this.map 中使用此代码。你可以做两件事。

使用箭头函数（推荐）。

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(){} 这样的函数时，this 指的是这个函数，但是当你使用 arrow 函数时，this 将指代 class.

Answer 3

自己找到解决方法：改变这个：

 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]);
    });

无法在 OpenLayers 函数中调用打字稿函数

Unable to call typescript function inside OpenLayers function

openlayers

typescript

angular