OpenLayers 3：点击地图添加标记时如何移除旧要素仅保留最新标记

嘿，你已经搞定了点击地图添加标记的核心功能，现在就差最后一步——清除旧标记啦！问题出在你每次点击都只往数据源里加新要素，却没把之前的旧要素移除，所以它们会一直留在地图上。

解决方法超简单：在添加新标记之前，先清空矢量数据源里的所有已有要素。OpenLayers的ol.source.Vector自带了clear()方法，正好能帮我们搞定这个事儿。

下面是修改后的完整代码，我把关键修改标出来了：

<script>
var vectorSource = new ol.source.Vector(),
    vectorLayer = new ol.layer.Vector({
        source: vectorSource
    }),
    olView = new ol.View({
        center: ol.proj.fromLonLat([48.4831, 36.6681]),
        zoom: 8,
        minZoom: 2,
        maxZoom: 20
    }),
    map = new ol.Map({
        target: document.getElementById('map'),
        view: olView,
        layers: [
            new ol.layer.Tile({
                style: 'Aerial',
                source: new ol.source.OSM()
            }),
            vectorLayer
        ]
    })
;

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'https://openlayers.org/en/v3.8.2/examples/data/icon.png'
    }),
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        fill: new ol.style.Fill({
            color: '#000'
        }),
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 2
        }),
        text: 'Some text'
    })
});

map.on('click', function(evt){
    // 关键修改：先清空所有旧要素
    vectorSource.clear();
    
    var feature = new ol.Feature(
        new ol.geom.Point(evt.coordinate)
    );
    var lon = ol.proj.toLonLat(evt.coordinate)[0];
    var lat = ol.proj.toLonLat(evt.coordinate)[1];
    console.info('longitude is: ' + lon + 'latitude is: ' + lat);
    feature.setStyle(iconStyle);
    vectorSource.addFeature(feature);
});
</script>

关键说明 #

• vectorSource.clear()：这个方法会一次性移除数据源中所有的要素，相当于一键清空旧标记，这样每次点击后地图上就只会显示最新添加的那个标记了。
• 把这个方法放在创建新要素之前调用，确保旧标记先被清除，再添加新的，逻辑更顺畅。

这样修改后，你再点击地图试试，旧标记就会自动消失，只保留你最近点击的点啦！

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