如何以编程方式清空地图上的绘制图层

Question

我想单击一个按钮，该按钮将自动清空在地图上绘制的所有矩形，圆形，多边形等。

但这没用。

或者有什么方法可以刷新地图，就像您第一次画图一样干净

<template>
    <div style="width: 100%;height: 100%;">
        <l-map ref="map" 
            style="background: #000;"
            :zoom="zoom"
            :center="center"
            attribution="attribution">
            <l-image-overlay
                :url="url"
                :bounds="bounds">
            </l-image-overlay>
        </l-map>
        <el-button @click="clearAllLayers">clear</el-button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            zoom: 1,
            center: [0, 0],
            attribution: '@haoxl',
            bounds: [[-90, -180], [90, 180]],
            content: '',
            url: require('../assets/eye_L.jpg'),
            map: null,
            lesion: {
                id: '',
                subLabelResultId: '',
                lesionType: '',
                description: '',
                shapetype: 1,
                points: []
            },
            drawnItems: null
        };
    },
    mounted() {
        this.$nextTick(() => {
            const self = this;
            this.map = this.$refs.map.mapObject;
            this.drawnItems = new window.L.FeatureGroup();
            this.map.addLayer(this.drawnItems);

            this.drawControl = new window.L.Control.Draw({
                position: 'topright',
                draw: {
                    polyline: false,
                    polygon: false,
                    circle: false,
                    circlemarker: false,
                    marker: false,
                    zoomControl: true,
                    rectangle: false
                },
                edit: {
                    featureGroup: this.drawnItems,
                    remove: true
                }
            });
            this.map.addControl(this.drawControl);
            window.L.rectangle([[17.308687886770034, 16.171875000000004], [-47.98992166741418, -59.76562500000001]]).addTo(this.drawnItems);

            // create
            this.map.on(window.L.Draw.Event.CREATED, e => {
                let layer = e.layer;
                layer.bindPopup(self.content);
                this.drawnItems.addLayer(layer);
                let lesion = cloneObj(this.lesion);
                lesion.id = layer._leaflet_id;
                lesion.description = self.content;
                lesion.points = JSON.stringify(layer._parts[0]);
            });
            // edit
            this.map.on(window.L.Draw.Event.EDITED, e => {
                debugger;
            });
        });
    },
    methods: {
        drawRect() {
            let drawControl = new window.L.Control.Draw();
            new window.L.Draw.Rectangle(this.map, drawControl.options.rectangle).enable();
        },
        clearAllLayers() {
            debugger;
            // this.map.on(window.L.Draw.Event.DELETED, e => {
            //     debugger;
            //     let layers = e.layers;
            // });

            new window.L.EditToolbar.Delete(this.map, {
                featureGroup: this.drawnItems
            });
        }
    }
};
</script>

我希望页面上绘制的所有矩形都将被清除，但是它什么也没做。

Answer 1

大多数可能只使用clearLayers()：

this.drawnItems.clearLayers();