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的调用将重新创建以前的标记...

只需在GetData请求的回调开始处设置live_data = []。

如何从传单地图中删除多个标记并添加新标记？

1 个答案: