OpenLayers 在添加新標記之前刪除當前標記

Question

我正在嘗試使用 openlayers 開發具有標簽位置功能的 Web 應用程序。 我想在單擊時添加最多一個標記來映射。 當用戶第二次點擊地圖時，之前的標記將被刪除。 但是，在添加新標記之前，我找不到合適的方法來刪除標記。 在添加新標記之前刪除添加的標記

我知道這個問題已經被問過了，但是我在不同的代碼中遇到了同樣的問題，我從那里嘗試了所有方法，但沒有任何效果。

這是我的代碼，希望你能找到任何幫助。

<script type="text/javascript">

            var layers = [new ol.layer.Tile({ source: new ol.source.OSM() })];

            var map = new ol.Map({
                target: 'map',
                view: new ol.View({
                    zoom: 5,
                    center: [166326, 5992663]
                }),
                interactions: ol.interaction.defaults({ altShiftDragRotate: false, pinchRotate: false }),
                layers: layers
            });

            var search = new ol.control.SearchPhoton({
                lang: "fr",
                reverse: true,
                position: true
            });
            map.addControl(search);

            search.on('select', function (e) {
                const a = e.coordinate[0];
                let b = e.coordinate[1];

                map.getView().animate({
                    center: e.coordinate,
                    zoom: Math.max(map.getView().getZoom(), 16)
                });

                map.getLayers().forEach(layer => {
                    if (layer.get('name') && layer.get('name') == 'markers') {
                        map.removeLayer(layer)
                    }
                });

                var markers = new ol.layer.Vector({
                    source: new ol.source.Vector(),
                    style: new ol.style.Style({
                        image: new ol.style.Icon({
                            anchor: [0.5, 1],
                            src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
                        })
                    })
                });

                map.addLayer(markers);

                var marker = new ol.Feature(new ol.geom.Point(e.coordinate));
                markers.getSource().addFeature(marker);

                //console.log(markers);
            });


            

        </script>

Answer 1

要查找具有屬性值的圖層，您需要在創建圖層時對其進行分配

            var markers = new ol.layer.Vector({
                properties: {name: 'markers'},
                source: new ol.source.Vector(),
                style: new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 1],
                        src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
                    })
                })
            });

為圖層使用全局變量會更容易

        var markers;
        search.on('select', function (e) {
            const a = e.coordinate[0];
            let b = e.coordinate[1];

            map.getView().animate({
                center: e.coordinate,
                zoom: Math.max(map.getView().getZoom(), 16)
            });

            if (markers) {
                map.removeLayer(markers)
            }

            markers = new ol.layer.Vector({
                source: new ol.source.Vector(),
                style: new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 1],
                        src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
                    })
                })
            });

            map.addLayer(markers);

            var marker = new ol.Feature(new ol.geom.Point(e.coordinate));
            markers.getSource().addFeature(marker);

            //console.log(markers);
        });