在反应传单中使用带有大量数据的 Geojson答案

【问题标题】：Using Geojson with tons of data in react leaflet在反应传单中使用带有大量数据的 Geojson
【发布时间】：2020-12-23 09:46:08
【问题描述】：

我正在使用 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的数据很大，有10万条记录

【问题讨论】：

一种解决方案可能是有条件地显示 geojson 子集，具体取决于您在地图上缩放时所在的地图区域。如果您有如此大量的数据，您不应该一次将它们全部可视化。
但是我需要这个功能来在我的地图上显示热图。你知道有什么解决办法吗？
如果你能以某种方式在 github repo 或类似的东西中分享 geojson 数据，或者分享你获取数据的 url 链接，我可以尝试提供帮助。
drive.google.com/file/d/1LQPGidSU52xXM-Pn6GXlVqVPmjKOo4lM/… 这是我要显示的geojson文件数据。数据量非常大。提前谢谢你
感谢您接受答复。如果您也可以投票，那就太好了。

标签： javascript reactjs leaflet geojson react-leaflet

【解决方案1】：

您可以尝试将您的大geojson 转换为topojson。因为

topojson 消除了冗余，允许存储相关的几何图形有效地在同一个文件中

如here 所述，当您在传单地图上渲染文件时，您可以获得更小的文件大小，从而获得更好的性能。

您可以使用此site 将您巨大的 geojson(17.1mb) 转换为 topojson(2.7mb)。转换后可以看到大小的差异。请注意，它没有无限的免费转换功能。

之后，您可以创建自己的反应包装器来呈现topojson。为此，您可以使用 Vadim 的回答 on this stackoverflow post。它需要一些适应才能与react-leaflet v.3.x 兼容，并且例如能够在每个县添加弹出窗口，但是在进行一些小的更改后，您可以在topojson 中可视化您巨大的geojson，因为它是一个正常的@ 987654331@.

function 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>

Demo

【讨论】：

【解决方案2】：

一种方法是减少 GeoJSON 中的特征。 GeoJSON 很大（55MB），因为它有很多地理点，可以使用 Mapshaper 工具 (mapshaper.org) 进行简化。

之前

之后

【讨论】：