0

每当我单击某个功能时，我都会尝试打开弹出窗口。我已经设法在地图上获得 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。由于项目规则，我无法更改它们，但我被困在这里。我尝试了许多不同的解决方案，但我总是遇到同样的问题。

4

1 回答 1

0

在回调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;
            }
        })
    })
于 2019-11-25T01:40:20.150 回答