OpenLayers触发点击事件时如何清理/隐藏/移除之前加载的图层

问题原因 #

你每次触发loadEvent方法时都会新建一个矢量图层stationsLayer添加到地图上，旧的图层没有被移除，就会出现之前事件的图标一直保留的问题，同时你每次调用还会重复添加弹窗覆盖层，也会造成冗余，另外你原代码末尾还有多余的});语法错误，需要删除。

解决方法 #

在全局作用域存储当前激活的站点图层和弹窗覆盖层，每次加载新事件前先清空旧的图层即可，具体修改如下：

1. 先在所有函数外声明全局变量存储当前图层和覆盖层：

// 存储当前展示的站点图层
let currentStationsLayer = null;
// 存储弹窗覆盖层，避免重复创建
let eventOverlay = null;

2. 修改loadEvent函数逻辑：

function loadEvent(e){
    var id = e.id;
    var event = document.getElementById(id);
    f = event.dataset.folder;
    var base = "http://faml.ncn.pe/";
    var urljson = base+"stations/"+f+".json";
    var json = (function () {
        var json = null;
        $.ajax({
            async: false,
            dataType: "json",
            url: urljson,
            mimeType: "application/json",
            success: function(data){
                json = data;
            }
        });
        return json;
    })();
    
    var njson = json.features.length;
    let datajson = (new ol.format.GeoJSON({
        dataProjection : 'EPSG:4326',
        featureProjection:  'EPSG:3857',
    })).readFeatures(json);

    let stationsSource = new ol.source.Vector({
        features: datajson       
    });

    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5,0.5],
            size: [28,19],
            offset: [1,1],
            scale: 1,
            src: 'assets/img/alert-smaller.png',       
        })
    });  

    // 新增逻辑：如果已存在旧的站点图层，先从地图移除
    if(currentStationsLayer) {
        map.removeLayer(currentStationsLayer);
    }

    var stationsLayer = new ol.layer.Vector({
        source: stationsSource,
        visible:true,
        title:"Marcadores",
        style: iconStyle,               
    });  
    map.addLayer(stationsLayer); 
    // 把新图层赋值给全局变量存储
    currentStationsLayer = stationsLayer;
    
    // 弹窗覆盖层只创建一次，后续复用即可
    if(!eventOverlay) {
        const overlayContainerElement = document.querySelector(".overlay-container");
        const overlayHeaderElement = document.querySelector(".header");
        eventOverlay = new ol.Overlay({
            element: overlayContainerElement,overlayHeaderElement
        })
        map.addOverlay(eventOverlay);
    }
}

额外优化建议 #

如果你的事件站点数量不多，也可以选择复用同一个矢量图层，每次只更新图层的数据源，不用销毁重建图层，性能会更好：

• 初始化时就创建好站点图层加到地图上，全局存储图层的数据源
• 每次加载新事件时，直接调用source.clear()清空旧数据，再调用source.addFeatures(datajson)添加新的站点数据即可

内容的提问来源于stack exchange，提问作者Ander Canales Medina