reactive-leaflet zu viele Markierungen verursachen einfrieren der Seite

Question

Ich verwende react-leftlet, um Marker in vielen Landkreisen anzuzeigen. Wie Sie sehen können, kartiere ich etwa 53K Marker. Das Problem ist, dass nach dem Rendern dieser Marker die Webseite praktisch unbrauchbar ist und oft einfriert. Gibt es einen Weg um diese Flugblatteinschränkung? Gibt es eine bessere Möglichkeit, diese vielen Markierungen anzuzeigen? Ich verwende GeoJson als Datenquelle. Dies ist, wie ich diese Punkte bin Rendering:

<GeoJSON 
    key={_.uniqueId()} 
    data= {this.props.countrySelected.geojson} 
    pointToLayer={this.pointToLayer.bind(this)} 
></GeoJSON> 

Hier ist die pointToLayer Funktion:

pointToLayer = (feature, latlng) => { 
// console.log(feature.properties); 
return L.circleMarker(latlng, { 
    color: this.getStyle(feature.properties.speed_connectivity, feature.properties.type_connectivity), 
    fillColor: this.getStyle(feature.properties.speed_connectivity), 
    fillOpacity: .6, 
    radius: 1 
}).bindPopup(popUpString(feature.properties)); // Change marker to circle 

}

Update mit Heatmap:

<HeatmapLayer 
      fitBoundsOnLoad 
      fitBoundsOnUpdate 
      points={this.props.countrySelected.geojson} 
      longitudeExtractor={m => m.geometry.coordinates[1]} 
      latitudeExtractor={m => m.geometry.coordinates[1]} 
      intensityExtractor={m => parseFloat(m.properties.speed_connectivity)} 
      /> 

Answer 1

Ja, die Performance wird mit so vielen Markern schrecklich sein. Ich würde empfehlen, entweder react-leaflet-markercluster oder react-leaflet-heatmap-layer zu verwenden.

Answer 2

Wenn Sie Punkte auf der Karte, um Sie eine WebGL Leinwand Overlay verwendet werden kann, gibt es eine Beispielimplementierung es here