Эффективный путь загрузки большого количества точек на карту (с примерами)

Сегодня я покажу, как эффективно загрузить большое количество точек на карту.

March 28, 2018 - 2 minute read -
web

Большое количество информации об этом на русском в моей книге https://getjump.me/posts/backends-book

Сегодня я покажу, как эффективно загрузить большое количество точек на карту.

https://github.com/getjump/maps-efficiency – репозиторий

Поднять у себя очень просто, достаточно установить Docker и следовать инструкции в README.md

Собственно самый большой интерес в примере представляют:

Ссылка на код

$points = app('db')->select('SELECT id, ST_X(geom) as longitude, ST_Y(geom) as latitude FROM points WHERE geom @ ST_Makebox2d(ST_MakePoint(?, ?), ST_MakePoint(?, ?))', $boundaries);

Запрос исполняемый выше вернёт геометрию входящую в определённые границы.

Работа происходит с тайлами, а от карты мы ожидаем нижний и верхний тайлы.

Тайлы – это такая структура, которая подразумевает фиксированное число прямоугольников в зависимости от зума.

Ссылка на код

for ($x = $boundaries[0]; $x <= $boundaries[2]; $x++) {
    for ($y = $boundaries[1]; $y <= $boundaries[3]; $y++) {
        // Здесь разумеется в настоящем приложении можно и нужно использовать механизм кэширования
        $data = $this->tileQueryDb($x, $y, $zoom);
        $response['features'] = array_merge($response['features'], $data['features']);
    }
}

И далее, мы применяем Loading Object Manager Яндекс Карт

Ссылка на код

var objectManager = new ymaps.LoadingObjectManager('/points?tileBounds=%t&z=%z');

Проделав это, мы получаем механизм, который будет подгружать геометрии по мере перемещения viewport карты в приложении.

P.S. В репозитории помимо этого есть пример использования Mapbox Vector Tiles, если будет интересно напишу подробнее про него.