首頁猿問在 React leaflet...

在 React leaflet 中使用 Geojson 和大量數(shù)據(jù)

JavaScript

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

我正在使用react-leaflet 的GeoJson 來顯示一個區(qū)域的所有多邊形。但是，當(dāng)數(shù)據(jù)量增加到 10000 時，性能變差，我的應(yīng)用程序出現(xiàn)性能問題，導(dǎo)致速度緩慢且滯后。如何提高 GeoJSon 在大數(shù)據(jù)上的性能？我的代碼： <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的數(shù)據(jù)量很大，有100k條記錄

查看完整描述

3 回答

慕哥9229398

TA貢獻(xiàn)1877條經(jīng)驗獲得超6個贊

您可以嘗試將您的 big 轉(zhuǎn)換geojson為topojson.?因為

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

當(dāng)您在傳單地圖上渲染它時，您可以實現(xiàn)更小的文件大小，從而獲得更好的性能。

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

之后，您可以創(chuàng)建自己的反應(yīng)包裝器來渲染topojson.?它需要進(jìn)行一些調(diào)整才能與兼容react-leaflet v.3.x，并且能夠在每個縣添加彈出窗口，但在進(jìn)行一些小的更改后，您可以像正常的那樣可視化您的巨大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>

演示

反對回復(fù) 2024-01-18

慕神8447489

TA貢獻(xiàn)1780條經(jīng)驗獲得超1個贊

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

前

后

反對回復(fù) 2024-01-18

慕村225694

TA貢獻(xiàn)1880條經(jīng)驗獲得超4個贊

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

反對回復(fù) 2024-01-18