Как удалить несколько маркеров с Leaflet Map и добавить новые?

Question

Я пытался создать листовую карту, которая получает данные о широте и долготе точек и рисует их на карте, а затем обновляет их.

Я работаю с Leaflet 1.5.1, и пока у меня естьпопытался создать слой, поместить маркеры внутрь слоя и очистить слой при обновлении маркеров.

var map;
var markers = [];
var live_data = [];
var markersLayer = new L.LayerGroup(); // NOTE: Layer is created here!
var updateMap = function(data) {
    console.log('Refreshing Map...');
    markersLayer.clearLayers();
    for (var i = 0; i < live_data.length; i++) {
        var heading = live_data[i][3];
        var latitude = live_data[i][1];
        var longtitude = live_data[i][2];
        var aircraft_id = live_data[i][0];
        var popup = L.popup()
            .setLatLng([latitude, longtitude])
            .setContent(aircraft_id);
        marker = L.marker([latitude, longtitude], {clickable: true}).bindPopup(popup, {showOnMouseOver:true});
        markersLayer.addLayer(marker);
    }
}

function GetData() {
    $.ajax({
        type        : 'GET', 
        url         : 'www.filesource.com/file.txt'
    })
    .done(function(data) {
        var lines = data.split('\n'); //Split the file into lines
        $.each(lines, function(index, value) { //for each line
            if(value.indexOf(':') > 0) { //Go if the line has data in it.
                var line_data = value.split(':');
                var data_marker = [line_data[0], line_data[5], line_data[6], line_data[45]];
                live_data.push(data_marker);
            }
        });
        updateMap();
    });
}

$(document).ready(function(){
    map = L.map('LiveMap', {
      'center': [39.50157442645549, 35.190536499023445],
      'zoom': 6,
      'layers': [
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        })
      ]
    });
    markersLayer.addTo(map);
    GetData();
    setInterval(GetData, 60000); //every minute
});

Сначала код работает нормально, создаются все маркеры.Однако при обновлении данных добавляется больше маркеров без очистки предыдущих маркеров.Где я делаю не так?

Answer 1

Хотя вы корректно очищаете свои предыдущие слои / маркеры, вы все равно сохраняете свой предыдущий live_data без изменений, поскольку вы только помещаете в него новые данные и никогда не сбрасываете их.Поэтому при следующем вызове updateMap эти предыдущие маркеры будут воссозданы ...

Просто установите live_data = [] в начале обратного вызова вашего запроса GetData.