禁用leaflet-draw编辑按钮并自定义删除按钮相关选项

1. 禁用编辑按钮，保留激活的删除按钮 #

完全可以通过Leaflet Draw的初始化配置精准实现这个需求。在创建L.Control.Draw控件时，你可以单独控制编辑工具栏里每个按钮的状态：

// 先创建存储绘制要素的featureGroup（这是Leaflet Draw编辑功能的基础）
const drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// 初始化Draw控件：关闭绘制工具，禁用编辑按钮，保留删除按钮
const drawControl = new L.Control.Draw({
  draw: false, // 如果不需要绘制功能，直接关闭所有绘制按钮
  edit: {
    featureGroup: drawnItems,
    edit: false, // 禁用编辑按钮
    remove: true // 让删除按钮保持激活状态
  }
});
map.addControl(drawControl);

核心就是edit配置项里的edit: false，它会直接隐藏编辑按钮，而remove: true确保删除按钮正常显示并可交互。

2. 自定义删除按钮，禁用弹出的“Save”选项 #

要去掉删除模式下的“Save”按钮，最简便的有两种实现方式：

方法一：CSS直接隐藏（最快）

通过CSS选择器定位到Save按钮，直接将其隐藏：

.leaflet-draw-actions .leaflet-draw-toolbar-save {
  display: none !important;
}

这种方式无需修改JS逻辑，适合快速实现需求。

方法二：事件监听动态控制（更灵活）

如果需要在特定条件下才隐藏Save按钮，可以监听draw:deletestart事件，在删除模式启动时操作DOM：

map.on('draw:deletestart', function() {
  const saveButton = document.querySelector('.leaflet-draw-actions a.leaflet-draw-toolbar-save');
  if (saveButton) {
    // 隐藏按钮
    saveButton.style.display = 'none';
    // 也可以选择禁用按钮：saveButton.disabled = true;
  }
});

两种方法都能达到禁用“Save”选项的效果，你可以根据实际场景选择。

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