Javascript 反应传单标记过多导致页面冻结

我使用react leftlet在许多县显示标记。正如你所看到的，我正在绘制大约53K个标记。问题是，在我渲染这些标记后，网页实际上是不可用的，而且经常会冻结。有办法绕过传单的限制吗？有没有更好的方法来显示这么多标记？Im使用GeoJson作为数据源。这就是我渲染这些点的方式：

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

}

使用热图更新：

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

m.geometry.coordinates[1]}
latitudeExtractor={m=>m.geometry.coordinates[1]}
intensityExtractor={m=>parseFloat（m.properties.speed\u connectivity）}
/>

是的，有这么多标记，性能会很差。我建议您使用或。

如果您想在地图上保留点，您可以使用WebGL画布覆盖，这里有一个示例实现

我不太清楚react传单，但是如果您可以使用map

preferCanvas

选项并将点显示为圆标记，这应该会对您有所帮助：谢谢您的回复，事实上，我正在这样做。我编辑了我的帖子来反映这一点。看看上面的代码！谢谢问题是热图没有将geojson作为数据。您可以使用react传单热图层api从geojson中提取lat/lon和强度：。我如何才能遍历所有点？现在我有什么是上面的编辑。

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