我正在使用 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)}
/>
最佳答案
是的,如果有那么多标记,性能会很糟糕。我建议使用 react-leaflet-markercluster或 react-leaflet-heatmap-layer .
关于javascript - react-leaflet 太多标记导致页面卡住,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46777002/