2017-10-16 7 views
1

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

}

enter image description here

ヒートマップを使用して更新:

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

の実装例があります私は正確に反応し、リーフレット知りませんが、あなたはマップ 'preferCanvas'を使用できるかどうかオプションを選択し、サークルマーカーとしてあなたのポイントを表示すると、これはあなたに役立ちます:https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 – ghybs

+0

お返事ありがとう私は実際にそれをやっています。私はそれを反映するために投稿を編集しました。上のコードを見てください!ありがとう!! – 39fredy

答えて

1

ええ、パフォーマンスはその数多くのマーカーでひどいものになるでしょう。 react-leaflet-markerclusterまたはreact-leaflet-heatmap-layerのいずれかを使用することをおすすめします。

+0

ヒートマップはgeojsonをデータとして使用しないという問題があります。 – 39fredy

+0

反応リーフレットヒートマップ層API:https://github.com/OpenGov/react-leaflet-heatmap-layer#apiを使用してgeojsonから緯度/経度と強度を抽出することができます。 –

+0

どのようにしてすべてのポイントを繰り返すことができますか?今私は編集の上にあるものを持っています。 – 39fredy

1

あなたは地図上のポイントを維持したい場合は、WebGLのキャンバスのオーバーレイを使用することができますが、それhere

関連する問題