OpenLayers如何实现点击地图添加带经纬度的动态标记并移除旧标记

核心实现逻辑如下：

• 新增一个独立的矢量图层用于承载标记点，挂载到当前地图实例上
• 点击地图时先清空该图层的所有旧要素，再创建新的标记点添加到图层，即可同时实现标记展示和旧标记自动清除的需求

修改后的完整代码如下：

initLocationPicker: function (){
    // 初始化矢量图层和数据源，专门用于存放标记点
    const markerSource = new ol.source.Vector();
    const markerLayer = new ol.layer.Vector({
        source: markerSource,
        // 可以自定义标记样式，不需要也可以去掉使用默认样式
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 6,
                fill: new ol.style.Fill({color: '#3b82f6'}),
                stroke: new ol.style.Stroke({color: '#fff', width: 2})
            })
        })
    });

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            // 把标记图层加入地图图层列表
            markerLayer
        ],
        target: 'map',
        view: new ol.View({
            // 原代码center是4326坐标系的经纬度，需转成地图默认的3857投影才会显示到正确位置
            center: ol.proj.fromLonLat([13.4050,52.5200]),
            zoom: 2
        })
    });
    var formId = this.formId;
    var form = document.forms[formId];
    map.on('singleclick', function (evt) {
        var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
        var lon = lonlat[0];
        var lat = lonlat[1];
        console.log(lonlat);
        form.elements.longitude.value = lon
        form.elements.latitude.value = lat

        // 清空旧标记
        markerSource.clear();
        // 创建新标记
        const marker = new ol.Feature({
            geometry: new ol.geom.Point(evt.coordinate)
        });
        // 添加新标记到数据源
        markerSource.addFeature(marker);
    });
},

补充说明：如果项目是模块化引入OpenLayers，需要提前导入对应依赖：Feature、Vector、VectorSource、Style、Circle、Fill、Stroke、Point等相关类。

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