4

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

2 回答 2

4

是的，有这么多标记，性能会很糟糕。我建议使用react-leaflet-markercluster或react-leaflet-heatmap-layer。

于 2017-10-17T05:14:31.307 回答
2

如果您想在地图上保留点，您可以使用 WebGL 画布覆盖，这里有一个示例实现

于 2017-10-17T19:42:51.437 回答