Как рендерить много объектов в яндекс картах(yandex maps) next.js?

Question

[Ислом Жуманиёзов]

Когда пытаюсь рендерить данные сайт просто зависает. объектов много около 10000. Как можно оптимизировать рендеринг такого количество объектов, что бы сайт не зависал и прогружался быстрее?
Код выглядит таким образом:

"use client";

import {Map, Placemark, YMaps} from '@pbe/react-yandex-maps';
import {useState} from 'react'

import {useQuery} from "@tanstack/react-query";
import {getApzs} from "@/app/(main)/page";
import {APZ} from "@/types/APZ";

const MapBox = () => {
    const {data,  isFetching} = useQuery({
        queryKey: ['posts'],
        queryFn: getApzs,
        initialData: [],
    })

    const [center, setCenter] = useState<number[]>([41.323829, 69.255752]);


    const handleBoundsChange = (event: any): void => {
        const newCenter = event.get('newCenter');
        setCenter(newCenter);
    };


    return (

        <>
            {isFetching ? <p>Loadinng...</p>
                :
                <YMaps>
                    <Map className="w-full h-full"
                         state={{center: center, zoom: 12}}
                         onBoundsChange={handleBoundsChange}
                    >
                        {
                            data.result.data.map((el: APZ) => (
                                <Placemark
                                    key={el.id}
                                    onClick={() => {
                                        alert("Вы нажали метку " + (1));
                                    }}
                                    geometry={[41.323829, 69.255752]}
                                    options={{
                                        iconLayout: 'default#image',
                                        iconImageHref: "/img/metro.svg",
                                        iconImageSize: [50, 50],
                                    }}
                                />
                            ))
                        }
                    </Map>
                </YMaps>
            }
        </>
    );
};

export default MapBox;

Спасибо!

Comments

[Dmitry Bay]

1) Загружать меньше данных.
2) Делать группировки.

[Aetae]

Скорее всего юзер не может работать адекватно сразу с 10000 объектами. Показывай только то, что нужно.

[Ислом Жуманиёзов]

Даже если показывать то что нужно со временем объектов будет столько же.

[Aetae]

Ислом Жуманиёзов, так ты не только показывай но и скрывай, duh.
В общем тебе нужна прослойка рендера меж картой и юзером. В данных будут всё те же тысячи объектов, но эта прослойка при каждой отрисовке(вызванной действием пользователя\изменением размеров и т.д.) должна будет отсечь лишнее, сгруппировать близкое в один объект, переиспользовать уже имеющиеся объекты и т.п.

[godsplan]

Ислом Жуманиёзов, похожий функционал предлагает react window

[Ислом Жуманиёзов]

Aetae, Да спасибо ответом оказался Object Manager в Yandex Maps Api который все это само делает

Answer 1

[Ислом Жуманиёзов]

Ответом оказался использование Object Manager в Yandex Maps Api