react-leaflet trop de marqueurs provoque le gel de la page

Question

J'utilise react-leftlet pour afficher des marqueurs dans plusieurs comtés. Comme vous pouvez le voir, je cartographie les marqueurs 53K. Le problème est que, après avoir rendu ces marqueurs, la page Web est pratiquement inutilisable et elle se fige souvent. Y a-t-il un moyen de contourner cette limitation de la notice? Y a-t-il une meilleure façon d'afficher autant de marqueurs? Im en utilisant GeoJson comme source de données. Voilà comment je suis rendu ces points:

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

Voici la pointToLayer Fonction:

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 

}

Mise à jour en utilisant la carte thermique:

<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

Ouais, la performance va être terrible avec autant de marqueurs. Je recommande d'utiliser soit react-leaflet-markercluster ou react-leaflet-heatmap-layer.

Answer 2

Si vous voulez garder des points sur la carte, vous pouvez utiliser une superposition de toile WebGL, il y a un exemple d'implémentation de celui-ci here