OpenLayers选择交互：带Icon/FontSymbol的点要素选中样式不变问题

核心问题 #

你的代码无法实现预期效果，关键问题集中在以下几点：

1. 样式获取逻辑错误
   你通过feature.getStyle()尝试获取样式，但实际你的图层是通过style: style_StruttureSensibili设置的图层级样式函数，特征本身并未绑定独立样式，因此feature.getStyle()会返回undefined，导致判断函数直接返回false，最终所有特征都会应用高亮样式。

2. 样式类型处理不全
   即使特征有样式，也可能是单个样式对象而非数组，你的函数只处理了数组情况，漏掉了单个样式的判断；同时如果样式是函数类型，也没有执行函数获取实际渲染的样式。

3. 判断条件冗余
   样式数组中的元素必然是ol.style.Style实例，无需额外判断，重复的image类型判断也完全多余。

修正后的代码 #

1. 正确的样式判断函数 #

// 检查特征是否使用Icon或FontSymbol样式
function hasFontSymbolOrIconStyle(feature, layer, resolution) {
  // 获取图层的样式（可能是函数、单个样式或样式数组）
  var style = layer.getStyle();
  var actualStyles;

  if (typeof style === 'function') {
    // 执行样式函数获取实际样式
    actualStyles = style(feature, resolution);
  } else {
    actualStyles = style;
  }

  // 统一转换为数组格式处理
  var stylesArray = Array.isArray(actualStyles) ? actualStyles : [actualStyles];

  // 检查数组中是否存在目标类型的图像样式
  return stylesArray.some(function(styleObj) {
    if (!(styleObj instanceof ol.style.Style)) return false;
    var image = styleObj.getImage();
    return image instanceof ol.style.Icon || image instanceof ol.style.FontSymbol;
  });
}

2. 修正后的Select交互配置 #

// 要素选择交互
var popupselect = new ol.interaction.Select({
  hitTolerance: 5,
  multi: true,
  condition: ol.events.condition.singleClick,
  style: function(feature, resolution) {
    // 获取要素所属图层
    var layer = feature.getLayer();
    if (hasFontSymbolOrIconStyle(feature, layer, resolution)) {
      // 返回图层计算后的原始样式，而非默认高亮
      var layerStyle = layer.getStyle();
      return typeof layerStyle === 'function' ? layerStyle(feature, resolution) : layerStyle;
    } else {
      // 对其他要素应用高亮样式
      return highlightPopupStyle;
    }
  }
});

map.addInteraction(popupselect);

关键说明 #

• 必须从图层获取样式，因为你的样式定义在图层而非特征上。
• 要兼容样式函数、单个样式对象、样式数组三种情况，确保能正确拿到实际渲染的样式。
• 返回图层计算后的原始样式替代null，因为返回null会触发Select交互的默认高亮样式，不符合需求。

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