当我点击基于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)
});
}
点击3.6ML点击9.0ML当我点击9.0ML时，3.6 ML的最后一个图标没有消失
我有另一个功能点击图标显示细节，它工作得很好
如果在函数外部声明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);