OpenLayers问题：如何阻止点击选择穿透上层图层？

问题根源在于OpenLayers的Select交互默认会对指定图层执行射线拾取，即便点击位置存在上层图层的要素，射线仍会穿透至下层目标图层，导致下层要素被误选。

要实现点击绿色矩形时不选中下方红色矩形，只需修改Select交互的condition配置，自定义触发选择的条件：

const selectSingleClick = new ol.interaction.Select({
  style: selectStyle,
  layers: [vectorLayer],
  // 自定义选择触发条件
  condition: function(event) {
    // 检查点击位置是否存在smallVectorLayer的要素
    const hasTopLayerFeature = map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {
      return layer === smallVectorLayer;
    });
    // 仅当是单击且无上层要素时，才触发选择
    return ol.events.condition.singleClick(event) && !hasTopLayerFeature;
  }
});

原理说明 #

• map.forEachFeatureAtPixel会在点击的像素位置遍历所有图层的要素，这里我们只判断是否存在smallVectorLayer的要素。
• 如果检测到上层绿色矩形要素，condition返回false，Select交互就不会执行拾取逻辑，自然不会选中下层红色矩形。
• 点击空白区域或红色矩形时，hasTopLayerFeature为false，Select交互正常触发。

完整修改后的关键代码片段 #

// ... 其余原有代码保持不变

const selectSingleClick = new ol.interaction.Select({
  style: selectStyle,
  layers: [vectorLayer],
  condition: function(event) {
    const hasTopLayerFeature = map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {
      return layer === smallVectorLayer;
    });
    return ol.events.condition.singleClick(event) && !hasTopLayerFeature;
  }
});

selectSingleClick.on("select", function (e) {
  console.log("select event");
});

map.addInteraction(selectSingleClick);

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