Angular 6集成OpenLayers 4.6.5：forEachFeatureAtPixel与onClick报错

看起来你遇到的核心问题是JavaScript中this的指向绑定错误，加上一些OpenLayers API的误用，导致popup对象无法正确访问，进而触发一系列错误。咱们一步步来修复：

问题根源分析 #

1. this指向错误：你在map.on('click', function(evt){ ... })里用了普通函数作为回调，这里的this指向的是map对象，而不是你的Angular组件实例，所以this.popup自然就是undefined，这也是console报错的核心原因。
2. API误用：你用map.addControl()来添加矢量图层，这是错误的——addControl是用来添加控件（比如图层切换器）的，添加图层应该用map.addLayer()。
3. Popup重复操作冗余：每次勾选复选框时都添加/移除popup，其实popup只需要初始化一次并添加到地图上，不需要随图层重复操作，控制图层的显示隐藏即可。

具体修复步骤 #

1. 修正事件回调的this绑定 #

把map的click事件回调改成箭头函数，这样this会自动绑定到Angular组件实例，就能正确访问this.popup了：

this.map.on('click', (evt) => { // 这里改成箭头函数
  // ... 后续代码
  console.log(this.popup); // 现在this指向组件实例，popup能正确访问
});

2. 修复图层添加的API调用 #

把handleSelected1和handleSelected2里的addControl/removeControl改成addLayer/removeLayer，同时移除冗余的popup添加/移除操作：

handleSelected1($event) {
  if($event.target.checked === true) {
    this.map.addLayer(this.vectorLayer_piscine); // 改成addLayer
    this.vectorLayer_piscine.setStyle(this.piscine);
  } else {
    this.map.removeLayer(this.vectorLayer_piscine); // 改成removeLayer
  }
}

handleSelected2($event) {
  if($event.target.checked === true) {
    this.map.addLayer(this.vectorLayer_parking); // 改成addLayer
    this.vectorLayer_parking.setStyle(this.markers);
  } else {
    this.map.removeLayer(this.vectorLayer_parking); // 改成removeLayer
  }
}

3. 优化Popup的初始化和事件绑定 #

把closer的点击事件绑定移到ngOnInit的popup初始化部分，不要在每次map click时重复绑定，同时只添加一次popup到地图：

ngOnInit() {
  // ... 其他初始化代码

  // popup初始化（只执行一次）
  const element = document.getElementById('popup');
  this.popup = new Overlay({
    element: element,
    autoPan: true,
    offset: [0, -30]
  });
  this.map.addOverlay(this.popup); // 这里只添加一次popup

  // 绑定closer的点击事件（只绑定一次）
  const closer = document.getElementById('popup-closer');
  closer.onclick = () => {
    this.popup.setPosition(undefined);
    closer.blur();
    return false;
  };

  // map click事件（已改为箭头函数）
  this.map.on('click', (evt) => {
    const feature = this.map.forEachFeatureAtPixel(evt.pixel, function(feature) {
      return feature;
    });
    if (feature) {
      const geometry = feature.getGeometry();
      const coord = geometry.getCoordinates();
      let content = '';
      // 重构内容拼接逻辑，避免重复声明
      if(feature.get('name') != null) {
        content = '<center><h2>' + feature.get('name') + '</h2></center><br>';
      } else if(feature.get('NOM') != null) {
        content = '<center><h2>' + feature.get('NOM') + '</h2></center><br>';
      }
      // ... 后续内容拼接代码
      const content_element = document.getElementById('popup-content');
      content_element.innerHTML = content;
      this.popup.setPosition(coord);
    } else {
      // 点击空白处隐藏popup
      this.popup.setPosition(undefined);
    }
  });

  // ... pointermove事件代码
}

4. 可选优化：符合Angular最佳实践（避免直接操作DOM） #

在Angular里尽量少用document.getElementById，可以用@ViewChild来获取DOM元素，比如：

import { ViewChild, ElementRef } from '@angular/core';

// 组件类内声明模板引用
@ViewChild('popup') popupElement: ElementRef;
@ViewChild('popupContent') popupContentElement: ElementRef;
@ViewChild('popupCloser') popupCloserElement: ElementRef;

// 初始化时替换getElementById
this.popup = new Overlay({
  element: this.popupElement.nativeElement,
  autoPan: true,
  offset: [0, -30]
});

对应的模板里给元素加上#popup、#popupContent、#popupCloser的模板引用变量即可。

额外高效优化提示 #

可以给矢量图层设置visible属性来控制显示隐藏，比每次add/remove图层更高效：

handleSelected1($event) {
  this.vectorLayer_piscine.setVisible($event.target.checked);
}

内容的提问来源于stack exchange，提问作者Adrien