Angular8 和 OpenLayers 6：错误类型错误：无法读取未定义的属性"forEachFeatureAtPixel"

Question

每当我单击某个功能时，我都会尝试打开弹出窗口。我已经设法在地图上获得了onclick事件，但是当我尝试单击该功能时，我在下面得到了上面的内容。我会感谢任何帮助，谢谢。

app.component.html

<div id="map" class="map"></div>
<div id='popup-container'>
<p id='popup-coordinates'></p>
</div>
<div class="overlay-container">
<span class='overlay-text' id='feature-name'></span><br>
<span class='overlay-text' id='feature-additional-info'></span><br>
</div>

app.component.ts

import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { AppComponentBase } from '../../../shared/app-component-base';
import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { fromLonLat } from 'ol/proj.js';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import { Icon, Style } from 'ol/style';
import OSM from 'ol/source/OSM';
import Overlay from 'ol/Overlay';
import * as olPixel from 'ol/pixel';
export class app {
temp;
map;
vectorSource;
vectorLayer;
rasterLayer;
pixel;
ngOnInit() {
this.mapCreator();
// Here I add some features from backend
}
mapCreator() {
this.vectorSource = new VectorSource({
features: []
});
this.vectorLayer = new VectorLayer({
source: this.vectorSource
});
this.map = new Map({
target: 'map',
layers: [new TileLayer({
source: new OSM()
})],
view: new View({
center: fromLonLat([35.6027698, 38.5946197]),
zoom: 6.8
}),
});
this.map.addLayer(this.vectorLayer);
// Vector Feature Popup 
const overlayContainerElement = document.querySelector('.overlay-container')
const overlayLayer = new Overlay({
element: overlayContainerElement
})
this.map.addOverlay(overlayLayer);
const overlayFeatureName = document.getElementById('feature-name');
const overlayFeatureAdditionInfo = document.getElementById('feature-additional-info');

// Vector Feature Popup
this.map.on('click', function (e) {
overlayLayer.setPosition(undefined);
this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
let clickedCoordinate = e.coordinate;
let clickedFeatureName = feature.get('name');
let clickedFeatureAdditionInfo = feature.get('additionalinfo');
if (clickedFeatureName && clickedFeatureAdditionInfo != undefined) {
overlayLayer.setPosition(clickedCoordinate);
overlayFeatureName.innerHTML = clickedFeatureName;
overlayFeatureAdditionInfo.innerHTML = clickedFeatureAdditionInfo;
}
})
})      
}
}

这是我点击地图时得到的错误;

ERROR TypeError: Cannot read property 'forEachFeatureAtPixel' of undefined
at Map.<anonymous> (app.component.ts:94)
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.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:26247)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
at invokeTask (zone.js:1693)
at HTMLDocument.globalZoneAwareCallback (zone.js:1730)

我正在使用Angular 8和Openlayers 6.1.1，正如我在标题中提到的。由于项目规则，我无法更改它们，但我被困在这里。我尝试了许多不同的解决方案，但我总是遇到同样的问题。

Answer 1

在回调中this等于map，因为它不是箭头函数，所以你可以做两件事，首先你可以将代码更改为this.forEachFeatureAtPixel如下：

// Vector Feature Popup
this.map.on('click', function (e) {
overlayLayer.setPosition(undefined);
this.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
let clickedCoordinate = e.coordinate;
let clickedFeatureName = feature.get('name');
let clickedFeatureAdditionInfo = feature.get('additionalinfo');
if (clickedFeatureName && clickedFeatureAdditionInfo != undefined) {
overlayLayer.setPosition(clickedCoordinate);
overlayFeatureName.innerHTML = clickedFeatureName;
overlayFeatureAdditionInfo.innerHTML = clickedFeatureAdditionInfo;
}
})
}) 

或者，您可以更改为箭头函数，您的代码将起作用：

// Vector Feature Popup
this.map.on('click', (e) => {
overlayLayer.setPosition(undefined);
this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
let clickedCoordinate = e.coordinate;
let clickedFeatureName = feature.get('name');
let clickedFeatureAdditionInfo = feature.get('additionalinfo');
if (clickedFeatureName && clickedFeatureAdditionInfo != undefined) {
overlayLayer.setPosition(clickedCoordinate);
overlayFeatureName.innerHTML = clickedFeatureName;
overlayFeatureAdditionInfo.innerHTML = clickedFeatureAdditionInfo;
}
})
})