OpenLayers如何编辑点要素？多边形覆盖导致点无法选中怎么解决

你遇到的是OpenLayers选择交互的默认拾取逻辑问题：同一坐标位置存在多个重叠要素时，ol.interaction.Select默认仅会拾取渲染层级最靠上的首个要素。由于你的多边形覆盖范围包含了点的所在位置，且多边形所在图层渲染优先级高于点图层，所以点击重叠位置时只会选到多边形，无法选中点。

可按优先级选择以下任意一种方案修复：

• 方案1：调整图层渲染顺序
  将点要素所在图层放到多边形图层的上方，保证同位置点击时优先拾取上层的点要素，示例代码：

  // 假设pointLayer是你的点图层，polygonLayer是你的多边形图层
  map.getLayers().remove(pointLayer)
  map.getLayers().insertAt(map.getLayers().getArray().indexOf(polygonLayer) + 1, pointLayer)
  

• 方案2：给Select交互补充配置，明确选择范围和拾取容差
  给Select交互添加layers指定要支持选择的所有图层，同时添加hitTolerance配置点击容差避免点太小难以选中，还可以通过filter参数自定义选择优先级逻辑
• 方案3：开启多选模式
  如果需要同时选中多个重叠要素，可给Select开启multi: true，点击重叠位置时会选中所有匹配要素，之后可自行判断要编辑的目标要素

function ActiveEdit() {
    var select = new ol.interaction.Select({
        wrapX: false,
        // 替换为你实际的点图层、多边形图层变量
        layers: [pointLayer, polygonLayer],
        // 点击容差，单位像素，避免点太小点不中
        hitTolerance: 5
    });
    var modify = new ol.interaction.Modify({
        features: select.getFeatures()
    });
    map.addInteraction(select);
    map.addInteraction(modify);
}

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