在添加新标记之前从 Openlayers 地图中删除所有标记

Question

我用这段代码渲染地图

var jsonData = '';
let userData = null;
var iconFeatures = [];
var source = new ol.source.Vector();

function getMap(facilities = "") {
    console.log(facilities);

    $.ajax({
        url : "getMarkers.php",
        type: "POST",
        cache: false,
        data:{
                facility:facilities
            },
        success:function(result){
            //clusters.clear();
            console.log(result);
            var stringified = JSON.stringify(result);
            jsonData = JSON.parse(stringified);
            $(".debug").text(stringified);
            console.log(Object.keys(result).length);   
            setIconFeatures();
            source.addFeatures(iconFeatures);
            
        },
    });

}

function createStyle(src, img) {
    return new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 0.96],
            crossOrigin: 'anonymous',
            src: src,
            img: img,
            imgSize: img ? [img.width, img.height] : undefined
        }))
    });
}

function setIconFeatures() {
    for(var key in jsonData) {          
        var jsonItem = jsonData[key];
    
        var iconFeature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([jsonItem.long, jsonItem.lat])));
        iconFeature.setId(key);
        iconFeature.set('style', createStyle('http://test.brugminbaghave.dk/img/BMB-marker.png', undefined));
        iconFeatures.push(iconFeature);
    }
}

var distance = document.getElementById('distance');

var unclusteredLayer = new ol.layer.Vector({
    source: source,
    style: function(feature) {
        return feature.get('style');
    },
    maxResolution: 300
});

var clusterSource = new ol.source.Cluster({
    distance: parseInt(40, 10),
    source: source
});

var styleCache = {};

var clusters = new ol.layer.Vector({
    source: clusterSource,
    style: function(feature) {
        var size = feature.get('features').length;
        var style = styleCache[size];
        if (!style) {
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 12,
                    stroke: new ol.style.Stroke({
                        color: '#fff'
                    }),
                    fill: new ol.style.Fill({
                        color: '#158D30'
                    })
                }),
                text: new ol.style.Text({
                    text: size.toString(),
                    fill: new ol.style.Fill({
                        color: '#fff'
                    })
                })
            });
            styleCache[size] = style;
        }
        return style;
    },
    minResolution: 301
});

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({
    target: 'map',
    layers: [raster, clusters, unclusteredLayer],
    view: new ol.View({
        center: ol.proj.fromLonLat([9.9191, 56.0227]),
        zoom: 7
    })
});

getMap();

在我的地图下面有一些复选框。当我检查其中一个时，我调用 getMap() 并且 getMarkers.php 提供新标记。但是如何在添加新标记之前删除旧标记？就像现在一样，我只是将新标记添加到地图上。

我试过 source.clear() 或类似的东西，但我无法找到正确的组合。

我应该寻找什么？

Answer 1

您将需要 source.clear()。您还需要在向其推送新功能之前清除 iconFeatures 数组，否则您还将添加回旧功能

        iconFeatures = [];
        setIconFeatures();
        source.clear();
        source.addFeatures(iconFeatures);

在添加新标记之前从 Openlayers 地图中删除所有标记

Remove all markers from Openlayers map before adding new

openlayers-6