Umgang mit großen Datenpunkten in Leaflet und Knoten

Question

Ich arbeite mit eckigen js und Leaflet js auf Client-Seite und Knoten js als Server.

Ich verwende https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupport, um & hinzuzufügen, entfernen Sie Layer, die eine große Anzahl von Datenpunkten enthalten.

Ich habe alle Datenpunkte in Mysql, ich hole Datenpunkte und ich sende sie an die Client-Seite, dann auf der Client-Ebene verwende ich eine Schleife, um diese in einer Schicht hinzuzufügen. Es funktioniert gut für einen kleinen Datensatz, jetzt ist mein Datensatz mehr als 50K.

Mit diesem aktuellen Ansatz stürzt mein Webbrowser ab.

Ich brauche eine Lösung oder einen Ansatz, um diese Situation zu behandeln.

Mein aktueller Datensatz-Array wie folgt aussieht,

var dataSetArray = [ 
    0:{ 
     latitude: 1.3023456, 
     longitude: 103.830367 
    }, 
] 

I Array von 50K-Objekten hat. Ich versuchte einige Ansätze wie,

1. Umgang mit diesen Daten auf der Serverseite.
2. Gene GeoJSON Objekt (Ich bin nicht sicher, wie es zu tun.)

kann mir jemand gibt einen Ansatz oder eine Lösung, ich bin auf diesem von den letzten 4 Tagen fest.

Ich bekomme zwei Array eins von 50K und andere von 20K. Ich füge zuerst 50 K Array hinzu, (unten ist mein Code)

var map = L.map('map', { 
    center: L.latLng(1.241244, 103.718401), 
    zoom: 18, 
    layers: [tiles], 
    zoomControl: false, 
}); 

var options = { 
    showCoverageOnHover: false, 
    animateAddingMarkers: true, 
    disableClusteringAtZoom: 17, 
    chunkedLoading: true, 
    chunkProgress: updateProgressBar, 
    maxClusterRadius: 100 
}; 

var markers = L.markerClusterGroup(options); 
var LeafIcon = L.Icon.extend({ 
    options: { 
    iconSize: [35, 35], 
    iconAnchor: [0, 0], 
    popupAnchor: [10, 2] 
    } 
}); 

var greenIcon = new LeafIcon({ 
iconUrl: 'img/marker.svg' 
}); 

var dataMarkers50K = [], dataMarkers20K = []; 

for (var i = 0; i < dataPoints50K.length; i++) { 
    var a = dataPoints50K[i]; 
    var dataMarker = L.marker(new L.LatLng(a.latitude, a.longitude), { 
    icon: greenIcon 
    }); 
    dataMarkers50K.push(dataMarker); 
} 

for (var k = 0; k < dataPoints20K.length; k++) { 
    var b = dataPoints20K[k]; 
    var contentString = ''; 

    if(b.content) contentString = b.content; 

    var dataMarker_2 = L.marker(new L.LatLng(b.latitude, b.longitude), { 
    icon: L.divIcon({ 
     className: 'label', 
     html: b.content, 
     iconSize: [45, 45], 
     iconAnchor: [0, 0], 
     popupAnchor: [15, 2] 
     }) 
    }); 

    dataMarker_2.bindPopup(contentString); 
    dataMarkers20K.push(dataMarker_2); 
} 

map.on('zoomend', function(e) { 
    if(map.getZoom() > 16){ 
    markers.removeLayers(dataMarkers50K); 
    markers.addLayers(dataMarkers20K); 
    }else if(map.getZoom() <= 16){ 
    markers.removeLayers(dataMarkers20K); 
    markers.addLayers(dataMarkers50K); 
    } 
}); 

markers.addLayers(dataMarkers50K); 
map.addLayer(markers); 

Lassen Sie mich wissen, wenn Sie irgendwelche Vorschläge haben. Danke für die Hilfe.

Answer 1

Ohne Ihren Code zu sehen, ist es schwer zu sagen, was Sie bereits auf der Client-Seite verbessern könnten.

Sicher würde die Verwaltung mehr Datenserver Seite helfen, aber Sie brauchen wahrscheinlich eine gute Menge an Arbeit.

Wie für GeoJSON, ich sehe nicht, wie das helfen könnte.

Ein paar Dinge zu überprüfen:

• Haben Sie fügen Sie alle Ihre Markierungen einmal, mit addLayers(), anstatt einer nach dem anderen addLayer() mit?
• Müssen Sie wirklich Ihre 50k Marker entfernen und die 20k anderen hin und her in einen Marker Cluster hinzufügen? Wäre das Entfernen/Hinzufügen direkt zur Karte (als 2 separate Marker-Cluster-Gruppen) genug?