首頁猿問在 React leaflet...

在 React leaflet 中使用 Geojson 和大量數據

JavaScript

侃侃無極 2024-01-18 14:56:51

我正在使用react-leaflet 的GeoJson 來顯示一個區域的所有多邊形。但是，當數據量增加到 10000 時，性能變差，我的應用程序出現性能問題，導致速度緩慢且滯后。如何提高 GeoJSon 在大數據上的性能？我的代碼： <Header /> <MapContainer center={[10.7743, 106.6669]} zoom={5}> <TileLayer attribution='© <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條記錄

查看完整描述

3 回答

慕哥9229398

TA貢獻1877條經驗獲得超6個贊

您可以嘗試將您的 big 轉換geojson為topojson.?因為

topojson 消除了冗余，允許相關的幾何圖形有效地存儲在同一個文件中

當您在傳單地圖上渲染它時，您可以實現更小的文件大小，從而獲得更好的性能。

您可以使用此站點將巨大的 geojson(?17.1mb?) 轉換為 topojson(?2.7mb?)。轉換后您可以看到大小的差異。請注意，它不具有無限的免費轉換功能。

之后，您可以創建自己的反應包裝器來渲染topojson.?它需要進行一些調整才能與兼容react-leaflet v.3.x，并且能夠在每個縣添加彈出窗口，但在進行一些小的更改后，您可以像正常的那樣可視化您的巨大geojson的.topojsongeojson

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>

演示

反對回復 2024-01-18

慕神8447489

TA貢獻1780條經驗獲得超1個贊

一種方法是減少 GeoJSON 中的功能。GeoJSON 很大 (55MB)，因為它有很多地理點，可以使用 Mapshaper (mapshaper.org)工具進行簡化。

前

后

反對回復 2024-01-18

慕村225694

TA貢獻1880條經驗獲得超4個贊

因此，解決此問題的另一種方法是使用畫布渲染器。有一個用于Leaflet Canvas 標記層的包。問題是默認情況下，Leaflet 為每個功能創建 dom 節點，這些功能確實會影響像您這樣的大層的性能。默認情況下，像圓形標記這樣的標記基元可以渲染到畫布上，但是像圖標這樣的東西需要更多的工作來渲染。

反對回復 2024-01-18

3 回答
0 關注
437 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 React leaflet 中使用 Geojson 和大量數據

在 React leaflet 中使用 Geojson 和大量數據

3 回答

前

后

添加回答