反應 - 傳單太多標記會導致頁面凍結

我正在使用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)} 
      />

來源

2017-10-16 39fredy

我不知道到底發生反應，傳單，但如果你能使用地圖'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。

來源

2017-10-17 05:14:31

問題在於熱圖不會將geojson作爲數據。 – 39fredy

您可以使用react-leaflet-heatmap-layer api從https://github.com/OpenGov/react-leaflet-heatmap-layer#api中提取geojson的緯度/經度和強度。 –

我將如何能夠遍歷所有點？現在我有編輯上面的內容。 – 39fredy

如果你想保持你可以使用WebGL的帆布覆蓋地圖上的點，有一個示例實現它here

來源

2017-10-17 19:42:51 AlexVestin

反應 - 傳單太多標記會導致頁面凍結

回答

相關問題