react-leaflet太多标记导致页面冻结

时间:2017-10-16 18:39:29

标签: javascript leaflet geojson react-leaflet

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

}

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

2 个答案:

答案 0 :(得分:2)

是的,有很多标记,表现会很糟糕。我建议使用react-leaflet-markerclusterreact-leaflet-heatmap-layer

答案 1 :(得分:1)

如果你想在地图上保留点,你可以使用WebGL画布覆盖,那里有一个示例实现here