Openlayers 3：无法在 Angular 5 应用程序中选择功能答案

【问题标题】：Openlayers 3 : cannot select a feature in an Angular 5 appOpenlayers 3：无法在 Angular 5 应用程序中选择功能
【发布时间】：2018-11-09 13:50:48
【问题描述】：

我想在我的 Angular 5 应用程序中选择 Openlayers 3 中的一项功能。单击某个功能后，我收到一条奇怪的消息：

core.js:1449 ERROR TypeError: Cannot read property 'call' of undefined

我必须使用 Openlayers3（而不是更新版本）。

我的 HTML 代码：

<div #mapElement id="map" class="map"></div>

组件代码为：

import {AfterViewInit, Component, ElementRef, ViewChild, OnInit} from '@angular/core';
declare var ol: any;

@Component({
  selector: 'app-taba-features',
  templateUrl: './taba-features.component.html',
  styleUrls: ['./taba-features.component.css']
})
export class TabaFeaturesComponent implements AfterViewInit {
  @ViewChild('mapElement') mapElement: ElementRef;
  public map: any;

  constructor() {
    // building a feature 'thing'
    const vectorSource = new ol.source.Vector({});
    const thing = new ol.geom.Polygon([[
      ol.proj.transform([6.12, 52.23], 'EPSG:4326', 'EPSG:3857'),
      ol.proj.transform([6.125, 52.24], 'EPSG:4326', 'EPSG:3857'),
      ol.proj.transform([6.13, 52.23], 'EPSG:4326', 'EPSG:3857')
    ]]);
    const featurething = new ol.Feature({
      name: 'Thing',
      geometry: thing
    });
    vectorSource.addFeature(featurething);
    // building the map
    const twello = ol.proj.transform([6.11, 52.23], 'EPSG:4326', 'EPSG:3857');
    const osmlayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    const view = new ol.View({
      center: twello,
      zoom: 15
    });
    this.map = new ol.Map({
      layers: [osmlayer,
        new ol.layer.Vector({
          source: vectorSource
        })],
      view: view
    });

    const that = this;
    this.map.on('click', function (evt) {
      const pixel = [evt.pixel];
      that.map.forEachFeatureAtPixel(pixel[0], pixel[1], function (feature, layer) {
        console.log('Hit'); // *** show feature name? 
      });
    });
  }

  ngAfterViewInit() {
    this.map.setTarget(this.mapElement.nativeElement.id);
  }
}

【问题讨论】：

标签： angular openlayers-3

【解决方案1】：

第一个解决方案是：

const that = this;
this.map.on('click', function(evt) {
   const pixel = evt.pixel;
   let selectedFeatures = 'Features: ';
   that.map.forEachFeatureAtPixel(pixel, function(feature, layer) {
      selectedFeatures += ' Region: ' + feature.get('N3NM');
      });
   document.getElementById('status').innerHTML = selectedFeatures;
 });

第二个解决方案是：

const selectSingleClick = new ol.interaction.Select();
selectSingleClick.on('select', function (e) {
  let features = [];
  let selectedFeatures = 'Features: ';
  features = e.target.getFeatures().getArray();
  for (let i = 0; i < features.length; i++) {
     selectedFeatures += ' Region: ' + features[i].get('N3NM');
  }
  document.getElementById('status').innerHTML = selectedFeatures;
});

【讨论】：