Leaflet.Editable批量多边形绘制编辑及导出删除功能实现问题

解决方案 #

核心思路是创建专属图层组存储所有绘制的多边形，结合Leaflet.Editable的图层创建事件自动收录新绘制要素，再基于图层组实现批量操作。

1. 初始化阶段新增图层组 #

首先在地图初始化逻辑后新增一个L.FeatureGroup（比普通LayerGroup更适合要素类图层管理），用于统一存储所有绘制的多边形，同时绑定绘制完成的监听事件：

map = new L.Map('mapa', {
    maxBounds: extent,
    minZoom: 12,
    touchZoom: true,
    tap: false,
    editable:true,
    attributionControl:true,
    zoomControl: true // 移除原代码重复定义的zoomControl配置
});

// 新增：创建存储所有绘制多边形的要素组
const drawnPolygons = L.featureGroup().addTo(map);

// 新增：监听Leaflet.Editable的要素创建事件，自动将新绘制的多边形加入要素组
map.on('editable:created', function(e) {
    // 可加判断仅收录多边形，过滤其他类型绘制要素
    if(e.layer instanceof L.Polygon) {
        drawnPolygons.addLayer(e.layer);
    }
});

2. 绘制按钮逻辑保留 #

原有绘制触发逻辑无需修改，保持即可：

$('body').on('click','#start_drawing',function(e){
    map.editTools.startPolygon('',{
        color:'#d7191c', 
        opacity:0.8, 
        weight: 5,
        fillColor:'#d7191c', 
        fillOpacity:0.2
    });
});

3. 批量删除所有多边形逻辑 #

直接调用要素组的清空方法即可：

$('body').on('click','#delete_drawing',function(e){
    drawnPolygons.clearLayers();
});

4. 批量导出为GeoJSON逻辑 #

遍历要素组内所有图层，组装为标准GeoJSON FeatureCollection：

$('body').on('click','#save_drawing',function(e){
    const geoJsonData = {
        type: 'FeatureCollection',
        features: []
    };
    drawnPolygons.eachLayer(function(layer) {
        geoJsonData.features.push(layer.toGeoJSON());
    });
    // 此处可自行添加后续导出逻辑，比如生成文件下载
    console.log(geoJsonData);
});

内容的提问来源于stack exchange，提问作者daniel.vrbik