反应 - 传单太多标记会导致页面冻结

问题描述：

我正在使用react-leftlet在许多县中显示标记。正如你所看到的，我正在绘制大约53K的标记。问题是，我渲染这些标记后，网页实际上无法使用，并且经常冻结。有没有解决这个传单限制的方法？有没有更好的方法来显示这些标记？我使用GeoJson作为数据源。这就是我如何呈现以下几点：反应 - 传单太多标记会导致页面冻结

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

这里是pointToLayer功能：

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

}

更新使用热图：

<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)} 
      />

我不知道到底发生反应，传单，但如果你能使用地图'preferCanvas'选项，并显示你的点作为圆圈标记，这应该会对你有帮助：https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 – ghybs

谢谢你的回复，我正在这样做。我编辑了我的帖子以反映这一点。看看上面的代码！谢谢！！ – 39fredy

答

是的，这个表现对于很多标记来说会很糟糕。我建议使用react-leaflet-markercluster或react-leaflet-heatmap-layer。

问题在于热图不会将geojson作为数据。 – 39fredy

您可以使用react-leaflet-heatmap-layer api从https://github.com/OpenGov/react-leaflet-heatmap-layer#api中提取geojson的纬度/经度和强度。 –

我将如何能够遍历所有点？现在我有编辑上面的内容。 – 39fredy

答

如果你想保持你可以使用WebGL的帆布覆盖地图上的点，有一个示例实现它here

反应 - 传单太多标记会导致页面冻结

相关推荐