반응 전단지 너무 많은 마커가 페이지를 동결시킵니다.

저는 react-leftlet을 사용하여 여러 카운티의 마커를 표시하고 있습니다. 보시다시피 저는 약 53K 마커를 매핑하고 있습니다. 문제는이 마커를 렌더링 한 후에는 웹 페이지가 실제로 사용할 수없고 종종 멈추는 것입니다. 이 전단지 제한 주위에 방법이 있습니까? 이 마커를 표시하는 더 좋은 방법이 있습니까? GeoJson을 데이터 소스로 사용합니다.반응 전단지 너무 많은 마커가 페이지를 동결시킵니다.

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

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

가 pointToLayer 기능입니다 : 이것은 내가이 점을 렌더링하고있어 어떻게

출처

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

반응 전단지 - 히트 맵 레이어 API를 사용하여 geojson에서 위도/경도 및 강도를 추출 할 수 있습니다 (https://github.com/OpenGov/react-leaflet-heatmap-layer#api). –

어떻게 모든 포인트를 반복 할 수 있습니까? 지금 나는 편집에서 위에있는 것을 가지고있다. – 39fredy

당신이 WebGL을 캔버스 오버레이를 사용할 수있는지도에 포인트를 유지하려는 경우,이 here이

출처

2017-10-17 19:42:51 AlexVestin

반응 전단지 너무 많은 마커가 페이지를 동결시킵니다.

답변

관련 문제