Angular中如何移除Leaflet插件的保存选项

问题描述 #

我参考了相关内容尝试了所有可行方案，但页面上Leaflet Draw的保存选项仍然没有被移除，以下是我编写的相关代码：

drawPluginOptions = { 
   draw: {
    polygon: {
    allowIntersection: false,
    repeatMode: false,        
    shapeOptions: {
      color: '#305496',
      fill: null,
      fillColor: null,
      fillOpacity: 0.2,
      opacity: 1,
    }
  },
  polyline: false,
  circle: false,
  rectangle: {
    showArea: false,
    repeatMode: false,
    shapeOptions: {
      clickable: false,
      color: "#305576",
      fill: null,
      fillColor: null,
      fillOpacity: 0.4,
      opacity: 1,
      stroke: true,
      weight: 2,
    }
  },
  marker: false,
  circlemarker: false
},
edit: {
  featureGroup: this.editLayers,
  edit: false,
  remove: true
}
};

可行解决方案 #

• 方案1：补充配置显式关闭保存功能
  不同版本Leaflet Draw对save配置的规则不一样，优先尝试在现有edit对象中新增save: false配置：

edit: {
  featureGroup: this.editLayers,
  edit: false,
  remove: true,
  save: false // 新增此行
}

如果不生效，换为嵌套配置格式：

edit: {
  featureGroup: this.editLayers,
  edit: false,
  remove: true,
  save: {
    save: false
  }
}

• 方案2：CSS强制隐藏保存按钮，规避版本兼容问题
  如果修改配置始终不生效，可以直接用样式隐藏对应按钮，用浏览器开发者工具选中保存按钮复制类名，替换下方选择器即可：

/* 以下为默认类名，不对的话自行替换 */
.leaflet-draw-actions a.leaflet-draw-action-save {
  display: none !important;
}

• 方案3：自动提交删除操作，无需用户手动点保存
  如果业务逻辑不需要用户确认删除，直接添加事件监听，删除完成后自动执行后续逻辑：

map.on('draw:deleted', function(e) {
  // 这里写删除后的业务代码即可
});

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