TypeScript+OpenLayers7：forEachFeatureAtPixel无法检测自定义图层要素

核心错误原因 #

1. 坐标转换逻辑错误
   你已经调用useGeographic()，这会让OpenLayers默认使用EPSG:4326（WGS84经纬度）作为地图坐标系统，所以map.on('click')事件返回的evt.coordinate本身就是EPSG:4326格式。但你错误地执行了：

const coordinate = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')

这相当于把一个已经是4326的坐标，错误地当成3857坐标来转换，导致最终计算出的像素位置完全偏离实际点击点，自然无法通过forEachFeatureAtPixel找到要素。

2. 重复绑定点击事件
   每次点击"Remove Feature"按钮时，都会给地图新增一个click事件监听器。多次点击按钮后，同一个地图点击会触发多次移除逻辑，容易引发异常。

修复后的代码 #

重点修改RemovePolygonButton类，同时优化事件绑定逻辑：

class RemovePolygonButton extends Control {
    private clickListener?: (evt: any) => void;

    constructor(mapComponent: MapComponent, map: Map) {
        const button = document.createElement('button')
        button.innerHTML = 'Remove Feature'

        super({ element: button })

        button.addEventListener('click', () => {
            // 切换移除模式：已绑定事件则移除，否则添加
            if (this.clickListener) {
                map.un('click', this.clickListener);
                this.clickListener = undefined;
                button.innerHTML = 'Remove Feature';
            } else {
                this.clickListener = (evt: any) => {
                    // 直接使用evt.coordinate，无需额外转换
                    const pixel = map.getPixelFromCoordinate(evt.coordinate);
        
                    const features: FeatureLike[] = [];
                    // 指定只检测目标FeatureLayer，提升效率并避免其他图层干扰
                    map.forEachFeatureAtPixel(pixel, (feature, layer) => {
                        if (layer === mapComponent.getFeatureLayer()) {
                            features.push(feature);
                        }
                    }, {
                        layerFilter: (layer) => layer === mapComponent.getFeatureLayer()
                    });

                    if (features.length > 0) {
                        // 移除点击到的第一个要素
                        mapComponent.getFeatureLayer().getSource()?.removeFeature(features[0]);
                    }
                    console.log('Features clicked: ', features);
                };
                map.on('click', this.clickListener);
                button.innerHTML = 'Cancel Remove';
            }
        })
    }
}

额外优化点 #

• 增加移除模式切换逻辑，点击按钮可开启/关闭移除功能，避免重复绑定事件。
• 通过layerFilter参数限定forEachFeatureAtPixel只检测目标图层，减少不必要的计算，同时避免其他图层要素干扰结果。
• 补充了实际移除要素的逻辑，修复后点击多边形即可直接删除。

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