Leaflet.pm 中 SetOptIn 模式下文本标注编辑问题的解决方案

问题背景

在使用 Leaflet.pm 进行地图标注时，开发者可能会遇到一个特殊场景：当启用了 SetOptIn 选项后，虽然可以防止意外编辑现有图层，但同时会导致新创建的文本标注无法正常编辑。这是一个典型的权限控制与功能需求冲突的场景。

现象分析

SetOptIn 是 Leaflet.pm 提供的一个重要安全特性，它可以确保只有明确标记的图层才能被编辑。然而，这个特性会对文本标注功能产生以下影响：

1. 新创建的文本标注默认会被标记为不可编辑
2. 文本输入框无法获得焦点
3. 用户无法输入任何文字内容

解决方案

针对这个问题，我们需要在图层创建时进行特殊处理。以下是完整的解决方案代码示例：

map.on("pm:create", (e) => {
  // 明确标记新创建的图层为可编辑
  e.layer.options.pmIgnore = false;
  
  // 重新初始化图层编辑功能
  L.PM.reInitLayer(e.layer);
  
  // 如果是文本标注类型，额外启用编辑和聚焦
  if(e.shape === "Text"){
    e.layer.pm.enable();
    e.layer.pm.focus();
  }
});

技术原理

这段代码的工作原理如下：

1. pm:create 事件监听：当创建新图层时触发
2. pmIgnore 属性设置：明确告知系统此图层不应被忽略
3. reInitLayer 调用：强制重新初始化图层的编辑功能
4. 文本标注特殊处理：对于文本类型，额外启用编辑状态并聚焦输入框

最佳实践建议

1. 选择性应用：可以根据图层类型决定是否应用此解决方案
2. 性能考虑：避免在大量图层创建时使用过于复杂的处理逻辑
3. 用户体验：可以添加视觉反馈，告知用户文本标注已准备好输入

总结

在 Leaflet.pm 中使用 SetOptIn 模式时，通过合理的事件处理和图层初始化控制，我们既可以保持系统的安全性，又能确保文本标注功能的正常使用。这种解决方案体现了在框架限制下寻找平衡点的开发思路，值得在类似场景中借鉴。