在传单 drawControl 中找到编辑或删除的形状

Question

我在我的 Angular6 应用程序中实现了 leaflet 和 leafletDraw，它工作正常，我可以触发创建事件并将多边形添加到我的地图，但是当我尝试删除或编辑我的多边形时，我找不到哪个形状被删除或编辑：

ngOnInit() {
        const myMap = this.mapElement.nativeElement;
        const map = L.map(myMap).setView([35.6892, 51.3890], 5);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
            maxZoom: 18,
        }).addTo(map);
        const editableLayers = new L.FeatureGroup();
        map.addLayer(editableLayers);
        if (this.type === 'marker') {
            this.marker = MarkerOptions;
            if (this.data) {
                L.marker(this.data, MarkerOptions).addTo(editableLayers).bindPopup('I am popup');
            }
        } else if (this.type === 'polygon') {
            this.polygon =  {
                allowIntersection: false,
                drawError: {
                    message: '<strong>Oh snap!<strong> you can\'t draw that!'
                },
                shapeOptions: {}
            };
            if (this.data) {
                L.polygon(this.data).addTo(editableLayers);
            }
        }
        const drawPluginOptions: LeafletControls.Control.DrawConstructorOptions = {
            position: 'topright',
            draw: {
                polyline: false,
                polygon: this.polygon,
                circle: false,
                rectangle: false,
                circlemarker: false,
                marker: this.marker
            },
            edit: {
                featureGroup: editableLayers,
                remove: {},
                edit: {
                    selectedPathOptions: {
                        stroke: false ,
                        color : '#e10010',
                        weight : 500
                    }
                }
            }
        };
        const drawControl = new L.Control.Draw(drawPluginOptions);
        map.addControl(drawControl);
        map.once(L.Draw.Event.CREATED, (e: any) => {
            console.log('lia e' , e);
            this.layer = e.layer;
            // if (type === 'marker') {
            //     layer.bindPopup('A popup!');
            // }
            editableLayers.addLayer(this.layer);
        });
        map.on('draw:edited', (e: any) => {
            console.log('lia edit' , e , this.layer); //unable to trigger which shape is.
        });
        map.on('draw:deleted', (e: any) => {
            console.log('lia delete' , e ); //unable to trigger which shape is.
            console.log(this.layer);
        });
    }

Answer 1

draw:edited 和 draw:deleted 事件传递给您一个 LayerGroup，其中包含 edited/deleted.

的图层

map.on('draw:edited', (e: any) => {
        var editedlayers = e.layers;
        editedlayers.eachLayer(function(layer) { // Do something with the edited layer
        });
    });

在传单 drawControl 中找到编辑或删除的形状

find which shape is edited or deleted in leaflet drawControl

javascript

angular

typescript

leaflet

leaflet.draw