如何在使用 OpenLayers 开始事件时 clean/hide/remove 分层

Question

当我点击每个事件的 json 事件时，我添加了一些图标，所以当我点击另一个事件时，属于最后一个事件的先前图标不会消失

function setListEvents(list,events){
    var n = events.length;
    var msg = "";
    for(i=0;i<n;i++){
        var Magnitude = events[i]['Magnitude'];
        var Id = events[i]['id'];
        var Folder = events[i]['Folder'];
        var Date = events[i]['Date'];
        var Time = events[i]['Time'];
        var Depth = events[i]['Depth'];
        var Latitude = events[i]['Latitude'];
        var Longitude = events[i]['Longitude'];
        //msg = msg+"<div>Magnitud: <font style='color:red;'>"+Magnitude+"</font></div>";
        msg = msg+"<div id='"+Id+"' data-folder='"+Folder+"' class='card' onclick='loadEvent(this);'><div class='card-body'><h4 class='card-title' style='color: #ff0000;'>"+Magnitude;
        msg = msg+"</h4><p style='margin-bottom: 0;'>Fecha: "+Date+" Hora: "+Time+"<br />Profundidad: "+Depth+"km<br />Ubicación: "+Latitude+"º"+Longitude+"º</p></div></div>";
    }
    //console.log(list);
    //console.log(msg);
    $( '#'+list ).html( msg );
    
}

function pad(num, size) {
    num = num.toString();
    while (num.length < size) num = "0" + num;
    return num;
}

function loadEvent(e){
    
    var id = e.id;
    var event = document.getElementById(id);
    f = event.dataset.folder;
    //console.log(f);
    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;
    })();
    
    //console.log(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       
    });

        /* creating image as style */ 
    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',       
        })
        
    });  

        /* creating vector and adding image on style created before */
    var stationsLayer = new ol.layer.Vector({
        source: stationsSource,
        visible:true,
        title:"Marcadores",
        style: iconStyle,
                       
    });  
    map.addLayer(stationsLayer); 
    
    /* showing popup when clicking a station */

    const overlayContainerElement = document.querySelector(".overlay-container");
    const overlayHeaderElement = document.querySelector(".header");
    const overlayLayer = new ol.Overlay({
        element: overlayContainerElement,overlayHeaderElement
    })
    map.addOverlay(overlayLayer)

    
});


}

clicken on 3.6ML clicked on 9.0ML 当我点击 9.0ML 时，3.6 ML 的最后一个图标并没有消失

我还有另一个功能，点击图标显示详细信息，效果很好

Answer 1

如果您将 stationsLayer 声明为函数外部的 var，则在创建新层之前删除旧层

var stationsLayer;
function loadEvent(e){
  ...
  ...
  map.removeLayer(stationsLayer);
  stationsLayer = new ol.layer.Vector({
    source: stationsSource,
    visible:true,
    title:"Marcadores",
    style: iconStyle,
                   
  });  
  map.addLayer(stationsLayer);

如何在使用 OpenLayers 开始事件时 clean/hide/remove 分层

How to clean/hide/remove Layer when start event with OpenLayers

javascript

maps

openlayers