Leaflet-draw绘制区域，可以编辑，删除，触发回调 代码示例

以下是一个代码示例，演示了如何使用Leaflet-draw绘制、编辑和删除区域，并触发相应的回调函数。

// 创建地图
var map = L.map('map').setView([51.505, -0.09], 13);

// 添加地图瓦片图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 创建绘图控件
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    },
    draw: {
        polygon: true,
        rectangle: true,
        circle: true,
        marker: true
    }
});
map.addControl(drawControl);

// 监听绘制完成事件
map.on(L.Draw.Event.CREATED, function (e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
    console.log(layer.toGeoJSON()); // 输出绘制的图形信息
});

// 监听编辑完成事件
map.on(L.Draw.Event.EDITED, function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        console.log(layer.toGeoJSON()); // 输出编辑后的图形信息
    });
});

// 监听删除完成事件
map.on(L.Draw.Event.DELETED, function (e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        console.log(layer.toGeoJSON()); // 输出删除后的图形信息
    });
});

在上述代码中，我们首先创建了一个Leaflet地图，并添加了一个OpenStreetMap的瓦片图层。然后，我们创建了一个绘图控件`drawControl`，并将其添加到地图上。在绘图控件中，我们设置了可以绘制多种类型的图形，包括多边形、矩形、圆形和标记。

接着，我们监听了三个事件，分别是绘制完成事件`L.Draw.Event.CREATED`、编辑完成事件`L.Draw.Event.EDITED`和删除完成事件`L.Draw.Event.DELETED`。在每个事件处理函数中，我们获取了相应的图形信息，并使用`console.log`输出到控制台，以便我们进行调试和测试。

最后，我们将绘制的图形添加到了一个`drawnItems`图层组中，以便我们可以在编辑和删除时方便地进行管理。