如何基于ol.interaction.Select实现聚类要素弹窗hover时的单点高亮？

我刚好做过类似的聚类要素交互需求，给你一套完整的可落地实现方案，基于OpenLayers 6+版本，亲测有效。核心思路就是通过ol.interaction.Select捕获聚类点击，提取子要素生成弹窗表格，再通过临时高亮图层实现悬浮行对应要素的红点高亮。

1. 准备两个核心图层：聚类图层（展示聚合后的要素）、高亮图层（单独用于显示悬浮时的红点，层级设为最高）
2. 配置Select交互，只触发聚类要素的点击事件，点击后提取聚类包含的所有子要素
3. 用ol.Overlay创建弹窗，动态渲染子要素的信息表格
4. 给表格行绑定鼠标悬浮/移出事件，对应添加/移除高亮图层中的子要素
5. 处理弹窗关闭时的清理逻辑，避免内存泄漏

1. HTML结构（包含地图容器和弹窗） #

<div id="map" style="width: 100%; height: 600px;"></div>
<div id="popup" class="ol-popup">
  <a href="#" id="popup-close" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

<style>
/* 弹窗基础样式，可根据UI需求调整 */
.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
  color: #666;
}
.ol-popup-closer:after {
  content: "✖";
}
/* 表格行悬浮样式 */
#popup-content table tr:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
</style>

2. JavaScript核心逻辑 #

// 引入OpenLayers模块（如果用CDN则无需这步，直接用全局ol对象）
import { Map, View } from 'ol';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource, Cluster } from 'ol/source';
import { Select } from 'ol/interaction';
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style';
import { Overlay } from 'ol';
import { fromLonLat } from 'ol/proj';

// --------------------------
// 1. 初始化高亮图层（用于悬浮红点）
// --------------------------
const highlightSource = new VectorSource();
const highlightLayer = new VectorLayer({
  source: highlightSource,
  style: new Style({
    image: new CircleStyle({
      radius: 6, // 红点大小
      fill: new Fill({ color: '#ff0000' }), // 红色填充
      stroke: new Stroke({ color: '#fff', width: 2 }) // 白色描边，增强辨识度
    })
  }),
  zIndex: 100 // 确保高亮图层在所有图层最上层
});

// --------------------------
// 2. 初始化聚类图层
// --------------------------
// 子要素数据源（替换成你的实际数据源，比如GeoJSON）
const vectorSource = new VectorSource({
  url: 'your-features.geojson',
  format: new ol.format.GeoJSON()
});

// 聚类源
const clusterSource = new Cluster({
  distance: 40, // 聚类距离（像素），可按需调整
  source: vectorSource
});

// 聚类图层样式（显示聚合数量）
const clusterLayer = new VectorLayer({
  source: clusterSource,
  style: (feature) => {
    const childCount = feature.get('features').length;
    return new Style({
      image: new CircleStyle({
        radius: 15,
        fill: new Fill({ color: '#3399CC' }),
        stroke: new Stroke({ color: '#fff', width: 2 })
      }),
      text: new Text({
        text: childCount.toString(),
        fill: new Fill({ color: '#fff' })
      })
    });
  }
});

// --------------------------
// 3. 初始化地图
// --------------------------
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({ source: new OSM() }), // 底图
    clusterLayer,
    highlightLayer
  ],
  view: new View({
    center: fromLonLat([116.397, 39.908]), // 替换成你的地图中心坐标
    zoom: 10
  })
});

// --------------------------
// 4. 创建Select交互（捕获聚类点击）
// --------------------------
const selectCluster = new Select({
  condition: ol.events.condition.click,
  filter: (feature) => {
    // 只选中聚类要素（聚类要素包含features属性）
    return feature.get('features') !== undefined;
  }
});
map.addInteraction(selectCluster);

// --------------------------
// 5. 创建弹窗Overlay
// --------------------------
const popupOverlay = new Overlay({
  element: document.getElementById('popup'),
  autoPan: true, // 自动平移地图，确保弹窗可见
  autoPanAnimation: { duration: 250 }
});
map.addOverlay(popupOverlay);

const popupElement = document.getElementById('popup');
const popupContent = document.getElementById('popup-content');
const popupClose = document.getElementById('popup-close');

// 弹窗关闭逻辑
popupClose.addEventListener('click', () => {
  popupOverlay.setPosition(undefined);
  // 清空高亮图层的所有要素
  highlightSource.clear();
  // 移除表格行的事件监听，避免内存泄漏
  const rows = popupContent.querySelectorAll('tr');
  rows.forEach(row => {
    row.removeEventListener('mouseover', handleRowMouseOver);
    row.removeEventListener('mouseout', handleRowMouseOut);
  });
});

// --------------------------
// 6. 处理聚类选中事件，生成弹窗表格
// --------------------------
selectCluster.on('select', (e) => {
  const selectedClusters = e.selected;
  if (selectedClusters.length === 0) {
    popupOverlay.setPosition(undefined);
    highlightSource.clear();
    return;
  }

  const clusterFeature = selectedClusters[0];
  const childFeatures = clusterFeature.get('features').getArray(); // 提取子要素数组
  const clickCoord = clusterFeature.getGeometry().getCoordinates(); // 点击位置坐标

  // 动态生成表格HTML（假设子要素有id和name属性，按需修改）
  let tableHtml = `
    <table>
      <thead>
        <tr><th>要素ID</th><th>要素名称</th></tr>
      </thead>
      <tbody>
  `;
  childFeatures.forEach(feature => {
    const featureId = feature.get('id') || feature.getId(); // 优先用业务ID，无则用内部ID
    const featureName = feature.get('name') || '未命名';
    tableHtml += `<tr data-feature-id="${featureId}"><td>${featureId}</td><td>${featureName}</td></tr>`;
  });
  tableHtml += '</tbody></table>';
  popupContent.innerHTML = tableHtml;

  // 设置弹窗位置
  popupOverlay.setPosition(clickCoord);

  // 给每个表格行绑定悬浮/移出事件
  const rows = popupContent.querySelectorAll('tbody tr');
  rows.forEach(row => {
    const targetFeature = childFeatures.find(f => {
      const fId = f.get('id') || f.getId();
      return fId === row.dataset.featureId;
    });
    if (targetFeature) {
      // 绑定事件时传入对应的子要素
      row.addEventListener('mouseover', () => handleRowMouseOver(targetFeature));
      row.addEventListener('mouseout', () => handleRowMouseOut(targetFeature));
    }
  });
});

// --------------------------
// 7. 悬浮高亮/移出清除逻辑
// --------------------------
function handleRowMouseOver(feature) {
  // 克隆子要素，避免修改原图层的要素状态
  const highlightFeature = feature.clone();
  // 给高亮要素设置唯一ID，方便后续移除
  highlightFeature.setId(`highlight-${feature.getId()}`);
  highlightSource.addFeature(highlightFeature);
}

function handleRowMouseOut(feature) {
  const highlightFeature = highlightSource.getFeatureById(`highlight-${feature.getId()}`);
  if (highlightFeature) {
    highlightSource.removeFeature(highlightFeature);
  }
}

1. 要素ID处理：如果你的子要素没有业务ID，可以用OpenLayers自动生成的内部ID（feature.getId()），确保每个要素唯一即可。
2. 克隆要素的必要性：克隆子要素是为了避免修改原图层的要素，如果你直接添加原要素到高亮图层，移除时要注意不要误删原图层的要素，克隆是更安全的做法。
3. 内存泄漏防范：弹窗关闭时一定要清除高亮图层的要素，并移除表格行的事件监听，避免无用的事件绑定占用内存。
4. 样式自定义：红点的大小、颜色，聚类的样式，弹窗的UI都可以根据你的需求自由调整。

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