OpenLayers drawend事件设置要素ID后新绘要素自动移除问题

三个问题共同导致功能异常：

• uid()是基于闭包实现的ID生成器工厂函数，调用后才会返回真正用于生成自增ID的内部函数，且每次调用uid()都会把内部计数重置为0、生成全新的独立闭包作用域。现有代码在每次drawend触发时才调用uid()，既没有拿到持久化的自增函数实例，也没有执行返回的内部函数获取数字ID，反而把函数对象本身作为ID设置给了要素。
• 函数作为ID赋值时会被隐式转换为函数字符串，每次uid()返回的内部函数结构完全一致，转成字符串后ID值完全重复。OpenLayers的矢量源默认不允许同ID的重复要素存在，因此第二个及之后的要素绘制完成后会被源直接丢弃，表现为画完自动消失。
• 额外逻辑隐患：现有addInteraction逻辑没有在新建Draw交互前移除旧的交互实例，多次触发函数（比如切换绘制类型）会导致多个Draw交互同时绑定在地图上，引发绘制逻辑冲突。

1. 在全局作用域下提前执行一次uid()，拿到持久化的ID生成函数，不要在绘制事件中重复调用工厂函数重置计数。
2. 修正drawend回调里的ID获取逻辑，调用ID生成函数拿到数字类型的自增ID后再设置给要素。
3. 新建Draw交互前先判断是否存在旧的draw实例，存在则先从地图中移除，避免交互重复绑定。

修复后的完整代码如下：

let draw; // 全局变量，后续用于移除交互
// 提前初始化唯一ID生成器，只执行一次uid()拿到持久化的自增方法
const generateId = uid();

function addInteraction() {
  const value = typeSelect.value;
  // 先移除已存在的旧绘制交互，避免重复绑定
  if (draw) {
    map.removeInteraction(draw);
    draw = null;
  }

  if (value !== 'None') {
    draw = new ol.interaction.Draw({
      source: source,
      type: typeSelect.value,
    }); 

    draw.on('drawend', function(event) {
      // 调用ID生成函数拿到数字类型的唯一ID
      const id = generateId();
      event.feature.setId(id);
    });

    map.addInteraction(draw);
  }
}

// 唯一ID生成函数
function uid(){
  var id = 0;
  return function() {
    if (arguments[0] === 0) {
      id = 0;
    }
    return id++;
  }
}

已经设置过ID的要素，直接调用要素实例的getId()方法即可拿到对应唯一ID，后续做删除、查询功能时可以直接使用：

// 示例：根据ID删除指定要素
function deleteFeatureById(featureId) {
  const feature = source.getFeatureById(featureId);
  if (feature) {
    source.removeFeature(feature);
  }
}

// 示例：遍历所有要素读取ID
source.getFeatures().forEach(feature => {
  console.log('要素ID：', feature.getId());
});

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