OpenLayers双击无法删除线、点要素报forEach undefined错误求助

问题描述 #

我正在OpenLayers中开发双击删除功能，使用的代码如下：

map.on('dblclick', function(evt) {
  var selectCollection = selectInteraction.getFeatures();
  if(selectCollection.getLength() > 0){
   var answer = window.confirm("Do you want to delete?")
   if (answer) {
     vectorLayer.getSource().removeFeature(selectCollection.item(0));
    }
  }
 }); 

功能整体运行正常，但部分场景下无法删除线要素（linestring）和点要素，所有带“填充面”的形状选中后都可以顺利删除，如下图所示：

删除线、点要素时会抛出如下报错：

Vector.js:906
Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

我尝试给getSource方法传入参数，依旧没有解决问题，修改后的代码如下：

map.on('dblclick', function(evt) {
 var selectCollection = selectInteraction.getFeatures();
 if(selectCollection.getLength() > 0){
 var answer = window.confirm("Do you want to delete?")
  if (answer) {
    vectorLayer.getSource(lineInteraction).  // the same line
    removeFeature(selectCollection.item(0));           
  }
 }       
});

请问有什么方案可以修复该问题？

修复方案 #

这个报错的核心原因是两个常见的OpenLayers使用误区：

1. vectorLayer.getSource()是无参方法，传入lineInteraction这类参数没有任何作用，只会返回该图层绑定的固定数据源。
2. 你绘制的点、线要素没有存放在vectorLayer对应的数据源中，从固定数据源删除不存在的要素时，就会触发内部遍历的forEach undefined报错，而填充面刚好都存放在这个图层的数据源里，所以删除正常。

你可以直接用下面的代码替换原有逻辑，不需要区分几何类型就能适配所有要素的删除：

map.on('dblclick', function(evt) {
  // 先阻止双击地图默认的放大行为，避免功能冲突
  evt.preventDefault();
  const selectCollection = selectInteraction.getFeatures();
  if(selectCollection.getLength() > 0){
    const selectedFeature = selectCollection.item(0);
    const answer = window.confirm("你确定要删除该要素吗？")
    if (answer) {
      // 直接从选中要素自身获取所属的数据源，不用绑定固定图层
      const featureSource = selectedFeature.getSource();
      if(featureSource) {
        featureSource.removeFeature(selectedFeature);
        // 删除后清空选择集合，避免残留选中状态
        selectCollection.clear();
      }
    }
  }
});

如果还有点、线很难选中的问题，可以在初始化selectInteraction的时候增加hitTolerance配置，扩大选中判定的像素范围：

const selectInteraction = new Select({
  // 数值为像素大小，5-10即可满足正常点选需求
  hitTolerance: 8
});

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