OpenLayers问题：如何避免点击聚合标记时触发矩形要素选择？

问题重现 #

点击带有文本4的蓝色聚合标记，由于该标记聚合的所有点要素都处于同一坐标，无需执行缩放操作，而是将地图居中到该标记位置。

异常情况 #

点击该聚合标记时，会触发左侧大矩形要素的Select交互，不符合预期。

已尝试操作 #

尝试在执行地图居中操作时阻止事件传播，但未解决问题。

需求 #

修改代码，避免点击聚合标记时触发矩形要素的Select交互。

解决方案 #

核心问题在于：

1. 原代码中矩形图层在聚合图层之上（图层数组顺序导致渲染层级更高），点击聚合标记位置时会同时命中矩形要素。
2. vectorLayer.getFeatures()是异步方法，在其回调中调用e.stopPropagation()时，事件已经传播到Select交互，无法阻止。
3. Select交互的条件判断逻辑错误，没有正确检测到聚合图层的要素。

修改要点 #

1. 调整图层顺序：将聚合图层放在矩形图层之后，确保聚合图层渲染在上方，点击时优先被检测到。
2. 修正Select交互的条件判断：直接检查点击位置是否存在聚合图层的要素，若存在则不触发矩形的Select交互。

修改后的完整代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/dist/ol.min.js"></script>

<div id="map"></div>

<style>
#map {
  height: 512px;
  width: 1024px;
}
</style>

<script>
function createRectangle(polygons, layerName) {
  const features = [];

  for (const [i, polygon] of polygons.entries()) {
    const feature = {
      type: "Feature",
      geometry: {
        type: "Polygon",
        coordinates: polygon
      },
      properties: {
        id: `${layerName} index ${i}`,
        layerName
      }
    };

    features.push(feature);
  }

  const json = {
    type: "FeatureCollection",
    features
  };

  return json;
}

function createPoints(points, groupName) {
  const features = [];

  for (const [i, point] of points.entries()) {
    const feature = {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: point
      },
      properties: {
        id: `${groupName} index ${i}`,
        groupName
      }
    };

    features.push(feature);
  }

  const json = {
    type: "FeatureCollection",
    features
  };

  return json;
}

const thePoints = createPoints(
  [
    [50, 33],
    [50, 33],
    [50, 33],
    [50, 33]
  ],
  "thePoints"
);

const styles = {
  Point: new ol.style.Style({
    image: new ol.style.Circle({
      radius: 7,
      fill: new ol.style.Fill({ color: "red" })
    }),
    stroke: new ol.style.Stroke({
      color: "hsla(0, 50%, 100%, 1.0)",
      width: 5
    }),
    fill: new ol.style.Fill({
      color: "hsla(0, 50%, 50%, 1.0)"
    })
  }),
  Polygon: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: "hsla(0, 50%, 100%, 1.0)",
      width: 5
    }),
    fill: new ol.style.Fill({
      color: "hsla(0, 50%, 50%, 1.0)"
    })
  })
};

const styleFunction = function (feature) {
  const featureType = feature.getGeometry().getType();
  return styles[featureType];
};

const vectorSource = new ol.source.Vector({
  features: new ol.format.GeoJSON({
    featureProjection: "EPSG:4326"
  }).readFeatures(thePoints)
});

const cluster = new ol.source.Cluster({
  distance: 30,
  minDistance: 10,
  source: vectorSource
});

const styleCache = {};
const vectorLayer = new ol.layer.Vector({
  source: cluster,
  style: function (feature) {
    const size = feature.get("features").length;
    let style = styleCache[size];
    if (!style) {
      style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          stroke: new ol.style.Stroke({
            color: "#fff"
          }),
          fill: new ol.style.Fill({
            color: "#3399CC"
          })
        }),
        text: new ol.style.Text({
          text: size.toString(),
          fill: new ol.style.Fill({
            color: "#fff"
          })
        })
      });
      styleCache[size] = style;
    }
    return style;
  },
  zIndex: 5,
  properties: {
    name: "big"
  }
});

const rectangles = createRectangle(
  [
    [
      [
        [-120, -75],
        [-120, 75],
        [45, 75],
        [45, -75]
      ]
    ]
  ],
  "rectangle"
);

const rectangleSource = new ol.source.Vector({
  features: new ol.format.GeoJSON({
    featureProjection: "EPSG:4326"
  }).readFeatures(rectangles)
});

const rectangleLayer = new ol.layer.Vector({
  source: rectangleSource,
  style: styleFunction,
  zIndex: 5
});

const map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    rectangleLayer, // 矩形图层放在前面
    vectorLayer     // 聚合图层放在后面，渲染在上方
  ],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [179, 0],
    zoom: 1
  })
});

map.on("click", (e) => {
  vectorLayer.getFeatures(e.pixel).then((clickedFeatures) => {
    if (clickedFeatures.length) {
      const features = clickedFeatures[0].get("features");
      if (features.length > 1) {
        const extent = ol.extent.boundingExtent(
          features.map((r) => r.getGeometry().getCoordinates())
        );
        const extentSize = ol.extent.getSize(extent);
        const isSmallExtent = extentSize[0] === 0 && extentSize[1] === 0;

        if (isSmallExtent) {
          const viewport = map.getViewport();
          const boundingRect = viewport.getBoundingClientRect();

          const centerPoint = [
            (boundingRect.left + boundingRect.right) / 2,
            (boundingRect.top + boundingRect.bottom) / 2
          ];

          map
            .getView()
            .centerOn(ol.extent.getCenter(extent), map.getSize(), centerPoint);
        } else {
          map
            .getView()
            .fit(extent, { duration: 1000, padding: [50, 50, 50, 50] });
        }
      }
    }
  });
});

const selected = new ol.style.Style({
  fill: new ol.style.Fill({
    color: "hsla(270, 50%, 50%, .1)"
  }),
  stroke: new ol.style.Stroke({
    color: "hsla(270, 50%, 50%, 1)",
    width: 5
  })
});

const selectSingleClick = new ol.interaction.Select({
  style: (feature) => {
    const color = "hsla(270, 50%, 50%, .1)";
    selected.getFill().setColor(color);
    return selected;
  },
  layers: [rectangleLayer],
  condition: function (e) {
    // 检查点击位置是否有聚合图层的要素，有则不触发Select
    const hasClusterFeature = map.getFeaturesAtPixel(e.pixel, {
      layerFilter: l => l === vectorLayer
    }).length > 0;
    return ol.events.condition.singleClick(e) && !hasClusterFeature;
  }
});

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

map.addInteraction(selectSingleClick);
</script>

关键修改说明 #

1. 图层顺序调整：将vectorLayer放在rectangleLayer之后，确保聚合标记渲染在矩形要素上方，点击时优先被识别。
2. Select条件修正：在condition中直接检测点击位置是否存在聚合图层的要素，若存在则返回false，阻止Select交互触发。
3. 移除无效的e.stopPropagation()：由于原异步回调中的阻止传播操作时机过晚，已无法生效，故移除。

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