OpenLayers 6(React)中添加标记后如何解绑singleclick事件？

要解决map.un('singleclick', onAddMarker)不生效的问题，核心要保证绑定和解绑使用同一个函数引用，并且在添加标记的逻辑完成后立即执行解绑操作，具体修正如下：

完整可运行代码示例 #

// 定义具名的添加标记函数（必须是具名函数，不能用匿名函数）
function onAddMarker(event) {
  // 创建点要素
  let iconFeature = new OlFeature({
    geometry: new OlPoint(event.coordinate),
    name: 'Somewhere near Nottingham',
  });
  // 将要素添加到图层数据源
  editLayer.getSource().addFeature(iconFeature);
  
  // 添加完成后立即解绑singleclick事件
  map.un('singleclick', onAddMarker);
}

// 绑定地图单次点击事件
map.on('singleclick', onAddMarker);

关键注意事项 #

• 不能使用匿名函数绑定事件：如果用map.on('singleclick', function(event) {...})这种匿名函数写法，后续无法通过map.un找到对应的函数引用进行解绑。
• 确保解绑操作在添加标记逻辑之后执行：保证只完成一次点击添加操作就移除事件监听。
• 检查实例一致性：确认调用map.on和map.un的是同一个地图实例，避免因实例对象不一致导致解绑失效。

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