OpenLayers 6.4：如何实现点击同一要素时每次触发选择事件？

我明白你的需求——默认情况下OpenLayers的Select交互在点击已选中的要素时只会取消选择，不会重复触发select事件，而你想要像谷歌地图那样，每次点击重叠图标都能切换选中的要素。下面是具体的实现方案：

核心思路 #

放弃依赖默认Select交互的自动选中逻辑，转而监听地图的click事件，手动获取点击位置的所有重叠要素，通过维护一个计数器来循环切换选中的目标。

具体实现步骤 #

1. 准备状态变量 #

先定义几个变量来跟踪选中状态和计数：

let selectedFeature = null; // 当前选中的要素
let overlappingFeatures = []; // 点击位置的重叠要素列表
let currentIndex = 0; // 当前选中的要素索引

2. 监听地图点击事件 #

通过地图的click事件处理所有点击逻辑：

map.on('click', (event) => {
  // 获取点击位置的所有目标图层要素（替换成你的图标图层）
  overlappingFeatures = map.getFeaturesAtPixel(event.pixel, {
    layerFilter: (layer) => layer === yourIconVectorLayer
  });

  if (overlappingFeatures.length > 0) {
    // 判断是否是点击已选中的要素组，更新索引
    if (selectedFeature && overlappingFeatures.includes(selectedFeature)) {
      // 索引循环，超过长度回到0
      currentIndex = (currentIndex + 1) % overlappingFeatures.length;
    } else {
      // 点击新的要素组，从第一个开始
      currentIndex = 0;
    }

    // 取消之前的选中状态
    if (selectedFeature) {
      selectedFeature.set('selected', false);
    }

    // 设置新的选中要素并标记状态
    selectedFeature = overlappingFeatures[currentIndex];
    selectedFeature.set('selected', true);
    
    // 这里执行你的选中回调逻辑，比如弹窗展示要素信息
    console.log('当前选中:', selectedFeature.get('yourProperty'));
  } else {
    // 点击空白区域，清空选中状态
    if (selectedFeature) {
      selectedFeature.set('selected', false);
      selectedFeature = null;
      overlappingFeatures = [];
      currentIndex = 0;
    }
  }
});

3. 配置图层样式（可选） #

为了让选中状态可视化，给图层添加支持选中状态的样式：

const iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    src: '你的图标URL',
    // 根据选中状态改变透明度（也可以改颜色、尺寸）
    opacity: (feature) => feature.get('selected') ? 1 : 0.6
  })
});

yourIconVectorLayer.setStyle(iconStyle);

4. 移除默认Select交互（如果之前添加过） #

如果你的地图之前添加了默认的Select交互，记得移除它避免冲突：

// 假设你之前创建过Select交互实例
const defaultSelect = new ol.interaction.Select();
map.removeInteraction(defaultSelect);

原理说明 #

默认的Select交互内部有判断逻辑：点击已选中的要素时会触发unselect事件而非select事件，这就是为什么你第二次点击同一图标没反应。通过手动监听click事件，我们完全掌控了选中逻辑，每次点击都会重新计算要选中的要素，实现类似谷歌地图的循环切换效果。

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