在 React leaflet 中使用 Geojson 和大量数据

Question

我正在使用react-leaflet 的GeoJson 来显示一个区域的所有多边形。但是，当数据量增加到 10000 时，性能变差，我的应用程序出现性能问题，导致速度缓慢且滞后。如何提高 GeoJSon 在大数据上的性能？我的代码：

 <Header />

      <MapContainer center={[10.7743, 106.6669]} zoom={5}>

        <TileLayer

          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

        />

        <GeoJSON

          style={LayerStyle}

          data={polygonData.features}

          onEachFeature={onEachContry}

        />

      </MapContainer>

PolygonData.features的数据量很大，有100k条记录

Answer 1

您可以尝试将您的 big 转换geojson为topojson. 因为topojson 消除了冗余，允许相关的几何图形有效地存储在同一个文件中当您在传单地图上渲染它时，您可以实现更小的文件大小，从而获得更好的性能。您可以使用此站点将巨大的 geojson( 17.1mb ) 转换为 topojson( 2.7mb )。转换后您可以看到大小的差异。请注意，它不具有无限的免费转换功能。之后，您可以创建自己的反应包装器来渲染topojson. 它需要进行一些调整才能与 兼容react-leaflet v.3.x，并且能够在每个县添加弹出窗口，但在进行一些小的更改后，您可以像正常的那样可视化您的巨大geojson的.topojsongeojsonfunction TopoJSON(props) {  const layerRef = useRef(null);  const { data, ...otherProps } = props;  function addData(layer, jsonData) {    if (jsonData.type === "Topology") {      for (let key in jsonData.objects) {        let geojson = topojson.feature(jsonData, jsonData.objects[key]);        layer.addData(geojson);      }    } else {      layer.addData(jsonData);    }  }  function onEachFeature(feature, layer) {    if (feature.properties) {      const { VARNAME_3, NAME_0 } = feature.properties;      layer.bindPopup(`${VARNAME_3}, ${NAME_0}`);    }  }  useEffect(() => {    const layer = layerRef.current;    addData(layer, props.data);  }, [props.data]);  return (    <GeoJSON ref={layerRef} {...otherProps} onEachFeature={onEachFeature} />  );}并像这样使用它：import topojson from "./phuong.json"; <MapContainer ..>      ...     <TopoJSON data={topojson} />  </MapContainer>演示

Answer 2

一种方法是减少 GeoJSON 中的功能。GeoJSON 很大 (55MB)，因为它有很多地理点，可以使用 Mapshaper&nbsp;(mapshaper.org)工具进行简化。前后

Answer 3

因此，解决此问题的另一种方法是使用画布渲染器。有一个用于Leaflet Canvas 标记层的包。问题是默认情况下，Leaflet 为每个功能创建 dom 节点，这些功能确实会影响像您这样的大层的性能。默认情况下，像圆形标记这样的标记基元可以渲染到画布上，但是像图标这样的东西需要更多的工作来渲染。