OpenLayers添加新标记前如何移除已有标记？

你的核心问题是创建标记图层时未设置name属性，导致删除旧图层的遍历逻辑无法匹配到目标图层，所以旧标记一直残留。下面提供两种可行的修复方案：

方案1：复用同一标记图层（推荐） #

不用每次删除再新建图层，提前创建好标记图层并添加到地图，每次只清空数据源再添加新标记，性能更优：

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);

// 提前创建标记图层并添加到地图
var markersLayer = 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'
        })
    })
});
map.addLayer(markersLayer);

search.on('select', function (e) {
    map.getView().animate({
        center: e.coordinate,
        zoom: Math.max(map.getView().getZoom(), 16)
    });

    // 清空旧标记，添加新标记
    markersLayer.getSource().clear();
    var marker = new ol.Feature(new ol.geom.Point(e.coordinate));
    markersLayer.getSource().addFeature(marker);
});

方案2：修正删除逻辑（适配原有代码结构） #

如果坚持每次新建图层，需要给图层设置name属性，确保删除逻辑能匹配到：

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) {
    map.getView().animate({
        center: e.coordinate,
        zoom: Math.max(map.getView().getZoom(), 16)
    });

    // 删除旧标记图层
    map.getLayers().forEach(layer => {
        if (layer.get('name') === 'markers') {
            map.removeLayer(layer);
        }
    });

    // 创建新图层时设置name属性
    var markers = new ol.layer.Vector({
        name: 'markers', // 关键：添加name属性
        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'
            })
        })
    });

    map.addLayer(markers);

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

说明 #

• 方案1更高效，避免频繁添加/删除图层的开销；
• 方案2仅修正原有逻辑的漏洞，适合不想大幅改动代码的场景。

内容的提问来源于stack exchange，提问作者user16991782