Openlayers调用selectedFeatures.clear()触发无限循环的解决方法

ol.Collection（也就是selectedFeatures所属的类）的所有增删操作（包括clear()、remove()）默认都会触发对应的add/remove事件，没有内置的静默执行参数。同时你当前的remove事件回调中执行了this.map.clear()，这个操作会清空地图内所有图层、交互和要素，会再次触发selectedFeatures的remove事件，最终形成无限循环。

推荐优先使用第一种方案，实现成本最低，对原有逻辑影响最小。

方案1：新增静默操作标记 #

在组件内新增一个标记变量，用来区分事件触发来源，主动清空时跳过回调内的业务逻辑：

// 组件内新增全局标记
this.isManualClearing = false

// 改写remove事件监听逻辑
this.selectedFeatures.on('remove', () => {
  // 主动清空场景直接跳过业务逻辑
  if (this.isManualClearing) return
  // 原有业务逻辑
  this.map.clear()
})

其他组件调用清空操作时的写法：

// 清空前置标记为主动操作
this.isManualClearing = true
this.selectedFeatures.clear()
// 重置标记，恢复后续正常交互的事件响应
this.isManualClearing = false

方案2：临时解绑事件监听 #

把事件回调抽成独立的命名函数，主动清空前先解绑事件，清空完成后再重新绑定：

// 抽离回调为独立命名函数，不要用匿名函数
const handleRemove = () => {
  this.map.clear()
}
// 绑定事件
this.selectedFeatures.on('remove', handleRemove)

主动清空时的操作：

// 先解绑事件
this.selectedFeatures.un('remove', handleRemove)
this.selectedFeatures.clear()
// 重新绑定事件，恢复正常响应
this.selectedFeatures.on('remove', handleRemove)

• 你当前的事件绑定代码存在语法错误：on方法的事件名参数和回调函数之间缺少逗号，回调函数也缺少闭合括号，修正后的合法写法为：

  this.selectedFeatures.on(['add'], function() {}) // 向地图添加要素
  this.selectedFeatures.on(['remove'], function(){ this.map.clear() })
  

• 除非你的业务逻辑确实需要清空整个地图的所有内容，否则remove回调内的this.map.clear()属于逻辑错误：如果你只是要清空选中要素集合，应该替换为this.selectedFeatures.clear()，这是导致你触发无限循环的核心诱因之一。

内容的提问来源于stack exchange，提问作者Jérôme BORGA