forEachFeatureAtPixel无法在自定义功能上触发

Question

我正在用角度8编写一个组件，该组件显示带有ol（5.3.3）库的开放式街道地图的地图，该库显示了一系列标记。每个标记都必须是可单击的，并且在回调函数中，我必须检索标记的ID。我遵循了其他在线解决方案提出的代码，但是没有用。特别是，forEachFeatureAtPixel函数始终会回答未定义。

[我试图同时使用标记和功能，在两种情况下都不要单击或forEachFeatureAtPixel函数

import {Component, OnInit, AfterViewInit} from '@angular/core';
import Map from 'ol/Map';
import XYZ from 'ol/source/XYZ';
import {Tile, Vector} from 'ol/layer.js';
import View from 'ol/View';
import Marker from 'ol/Feature';
import Point from 'ol/geom/Point.js';
import {fromLonLat} from 'ol/proj.js';
import VectorSource from 'ol/source/Vector.js';
import {Icon, Style} from 'ol/style.js';
import Feature from 'ol/Feature';


@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {
  map: any;
  feature: any

  constructor() {
  }

  ngOnInit() {

  }

  ngAfterViewInit() {
    this.map = new Map({
      target: 'map',
      layers: [
        new Tile({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 3,
        minZoom: 3,
        maxZoom: 15
      })
    })
    const marker = new Feature({
      geometry: new Point(fromLonLat([41.9, 12.5])),
      id: 'pippo'
    })
    marker.setStyle(
      new Style({
        image: new Icon(({
          crossOrigin: 'anonymous',
          src: '/assets/icons/marker-green.png',
          imgSize: [24, 24]
        }))
      })
    );
    const markerList = new Vector({
      source: new VectorSource({
        features: [
          marker
        ]
      })
    })
    this.map.addLayer(markerList);
    this.map.on('click', (event) => {
      this.feature = event.map.forEachFeatureAtPixel(event.pixel,
        function (feature) {
          return feature;
        });
      if (this.feature) {
        console.log(this.feature.getGeometry().getCoordinates());
      }
    })
  }
}

or 
import {Component, OnInit, AfterViewInit} from '@angular/core';
import Map from 'ol/Map';
import XYZ from 'ol/source/XYZ';
import {Tile, Vector} from 'ol/layer.js';
import View from 'ol/View';
import Marker from 'ol/Feature';
import Point from 'ol/geom/Point.js';
import {fromLonLat} from 'ol/proj.js';
import VectorSource from 'ol/source/Vector.js';
import {Icon, Style} from 'ol/style.js';
import Feature from 'ol/Feature';


@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {
  map: any;
  feature: any

  constructor() {
  }

  ngOnInit() {

  }

  ngAfterViewInit() {
    this.map = new Map({
      target: 'map',
      layers: [
        new Tile({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 3,
        minZoom: 3,
        maxZoom: 15
      })
    })
    const marker = new Feature({
      geometry: new Point(fromLonLat([41.9, 12.5])),
      id: 'pippo'
    })
    marker.setStyle(
      new Style({
        image: new Icon(({
          crossOrigin: 'anonymous',
          src: '/assets/icons/marker-green.png',
          imgSize: [24, 24]
        }))
      })
    );
    const markerList = new Vector({
      source: new VectorSource({
        features: [
          marker
        ]
      })
    })
    this.map.addLayer(markerList);
    this.map.on('click', (event) => {
      this.feature = this.map.forEachFeatureAtPixel(event.pixel,
        function (feature) {
          return feature;
        });
      if (this.feature) {
        console.log(this.feature.getGeometry().getCoordinates());
      }
    })
  }
}

我没有控制台错误。我希望以某种方式通过点击它恢复标记的ID。从网上找到的代码中，我希望解决方案由forEachFeatureAtPixel提供，但它不起作用。

Answer 1

地图的宽度需要设置为任意值，只要该值与100％不同即可。任何确定的值都可以。