Использование Geojson с кучей данных в буклете реакции
Я использую 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 очень большие, в них 100 тысяч записей.
Но мне нужна эта функция для отображения тепловой карты на моей карте. Вы знаете какое-нибудь решение?
Если бы вы могли каким-то образом поделиться данными geojson, например, в репозитории github или чем-то подобным, или поделиться URL-ссылкой, по которой вы извлекаете данные, я мог бы попытаться помочь.
спасибо, что приняли ответ. Было бы неплохо, если бы вы также могли проголосовать за это.
Спасибо. Но ваше решение верно только в случае небольших данных geojson. Я попытался преобразовать свои данные geojson (55 МБ) в Topojson и вставить их, производительность приложения по-прежнему очень плохая и очень медленная. Можете ли вы дать мне другие решения?
Вы предоставили геоджсон размером 17,1 МБ, а не 55 МБ, поэтому я смог воспроизвести этот конкретный случай, но не с большим. Другие решения для больших данных могут включать обслуживание вашего geojson через плитки, но это включает в себя обслуживание ваших плиток через сервер (geoserver f.i).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете попробовать превратить свой большой geojson в topojson. Потому что
topojson устраняет избыточность, позволяя сохранять связанные геометрии эффективно в том же файле
как упоминалось здесь, вы можете значительно уменьшить размер файла и, следовательно, повысить производительность при отображении его на карте листовки.
Вы можете использовать этот сайт, чтобы преобразовать ваш огромный геоджсон (17,1 МБ) в топойсон (2,7 МБ). Вы можете увидеть разницу в размере после преобразования. Обратите внимание, что у него нет неограниченной возможности бесплатной конвертации.
После этого вы можете создать свою собственную оболочку реакции для рендеринга topojson. Для этого вы можете использовать ответ Вадима на этот пост stackoverflow. Требуется некоторая адаптация, чтобы быть совместимым с react-leaflet v.3.x и иметь возможность добавлять всплывающие окна, например, в каждой префектуре, но после внесения небольших изменений вы можете визуализировать свой огромный geojson в topojson, как это было обычно geojson.
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>
Вместо того, чтобы использовать предоставленный сайт (который просит вас заплатить), вы можете бесплатно использовать www.mapshaper.org для преобразования ваших данных.
В 2020 году это было бесплатно....
Одним из способов может быть сокращение функций в вашем GeoJSON. GeoJSON огромен (55 МБ), потому что в нем много географических точек, которые можно упростить с помощью инструмента Mapshaper (mapshaper.org).
До
После
Итак, другой способ приблизиться к этому — использовать Canvas Renderer. Есть упаковка для маркерного слоя Leaflet Canvas. Проблема в том, что по умолчанию Leaflet создает узлы dom для каждой функции, которая действительно влияет на производительность с такими большими слоями, как ваш. Примитивы маркеров, такие как маркер круга, могут быть отображены на холсте по умолчанию, но для рендеринга таких вещей, как значки, требуется немного больше работы.
Одним из решений может быть условное отображение подмножеств geojson в зависимости от области карты, в которой вы находитесь, например, при масштабировании карты. Если у вас есть такой огромный объем данных, вы не должны визуализировать их все сразу.