私は反応左の記号を使って多くの郡でマーカーを表示しています。ご覧のとおり、私は約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