Что такое viewport карты: центр, зум и видимое окно тайлов

Если вы когда-либо писали код, взаимодействующий с библиотекой карт, вы писали код, работающий с viewport. Viewport — runtime-состояние карты: где она центрирована, насколько приближена, в какую сторону смотрит и опционально насколько наклонена. Каждое панирование, зум, поворот и клик зависят от него.

Это руководство объясняет, что такое viewport на самом деле, каковы четыре основных значения, описывающих его, как он взаимодействует с тайлами и bounding box, и каковы продакшн-паттерны для сохранения, восстановления и передачи состояния viewport.

Четыре основных значения

Viewport современной веб-карты описывается до четырьмя значениями:

• Center ({ lat, lng }): географическая координата в центре экрана.
• Zoom (число, часто дробное): насколько карта приближена. Бо'льшие числа показывают меньшие области в большей детализации.
• Bearing (число в градусах, по умолчанию 0): поворот карты от «севера вверху». 90 означает, что восток смотрит вверх.
• Pitch (число в градусах, от 0 до ~85): 3D-наклон. 0 — плоский вид сверху, 60 — выраженная перспектива.

Каждая современная библиотека карт (MapLibre GL, Mapbox GL, OpenLayers, Leaflet, MapAtlas Dynamic Maps) раскрывает эти значения как читаемое и изменяемое состояние. Двумерная библиотека, такая как Leaflet, может не раскрывать bearing или pitch.

Уровни зума подробнее

Уровень зума — наиболее часто задаваемый вопрос из четырёх. Это целое (или дробное) число, отображающее мир на пирамиду тайлов:

• Зум 0: весь мир в одном тайле 256x256
• Зум 1: мир разбит на 4 тайла
• Зум 2: 16 тайлов
• ...
• Зум 14: ~268 миллионов тайлов, масштаб района
• Зум 18: масштаб здания
• Зум 22+: обычно рендерится с апскейлингом векторного стиля, а не свежими данными тайлов

Полезное правило при работе на экваторе: каждое увеличение уровня зума вдвое уменьшает видимую ширину на экране. На зуме 14 один экран обычно показывает несколько городских кварталов. На зуме 10 — metropolitan area. На зуме 6 — страну. Эффективное разрешение зависит от размера экрана и проекции (Web Mercator искажает расстояния по оси север-юг по мере приближения к полюсам).

Большинство продакшн-кода хранит зум как float (например, 14,5), потому что анимации плавного зумирования интерполируют между целочисленными уровнями. Загрузка тайлов происходит на целочисленном уровне, округлённом вниз или вверх в зависимости от соглашений библиотеки.

Viewport и bounding box

Viewport — это состояние камеры. Bounding box — прямоугольник, видимый в данный момент. Bbox вычисляется из viewport каждый раз, когда нужно спросить сервер: «что показывать в этом виде?»

В коде:

const bbox = map.getBounds(); // returns { _sw: {lat, lng}, _ne: {lat, lng} }
const params = new URLSearchParams({
  bbox: `${bbox._sw.lng},${bbox._sw.lat},${bbox._ne.lng},${bbox._ne.lat}`,
});
const features = await fetch(`/api/places?${params}`).then(r => r.json());

Этот паттерн (вычислить bbox из viewport, отправить на сервер, отрендерить возвращённые объекты) — сердцебиение каждого поискового опыта по viewport: недвижимость, листинги, поиск магазинов, отслеживание транспорта, каршеринг.

Как viewport управляет загрузкой тайлов

При изменении viewport библиотека карт определяет, какие тайлы покрывают новую видимую область на текущем уровне зума, загружает недостающие тайлы с сервера (или из кэша в памяти) и рендерит их. Уже кэшированные тайлы переиспользуются; тайлы за пределами viewport сохраняются на случай, если пользователь вернётся назад.

Плавные панирование и зум ощущаются бесшовными, потому что библиотека выполняет эту работу асинхронно: рисует то, что есть, загружает то, чего нет, и обновляет canvas по мере прибытия новых тайлов. Пайплайны векторных тайлов выполняют дополнительную работу по рендерингу геометрии в пиксели на GPU, что и позволяет современным веб-картам оставаться чёткими при любом зуме и повороте.

Сохранение и передача состояния viewport

Хранение viewport в URL — стандартный паттерн для шарируемых ссылок на карту. Большинство продуктов используют хэш URL вида #map=14.5/52.5200/13.4050 (зум, широта, долгота). При загрузке страницы парсите хэш и применяйте viewport. При изменении viewport делайте debounce на несколько сотен миллисекунд и обновляйте хэш, чтобы кнопка «назад» браузера оставалась полезной.

Для внутреннего состояния браузера между вкладками или сессиями подойдёт ключ в localStorage той же структуры. Для серверных страниц viewport часто фигурирует как query-параметры для SEO-дружественных URL (?zoom=14&lat=52.52&lng=13.405).

Смещение viewport для поиска и автодополнения

Геокодирующие API принимают viewport (или его bbox) как параметр смещения. MapAtlas раскрывает boundary.rect.* для жёсткого фильтра и focus.point.* для мягкого смещения. Без смещения автодополнение «Springfield» вернёт наиболее глобально популярный Springfield. Со смещением по viewport пользователь, печатающий внутри своей карты штата Массачусетс, первым получит результаты из Массачусетса.

Применяйте это смещение при каждом нажатии клавиши. Цена — один параметр; выигрыш — значительно более релевантные подсказки.

Начальный viewport: откуда начинать

Первое, что должно решить каждое картографическое приложение — откуда начинать. Распространённые паттерны:

• По умолчанию в зависимости от локали пользователя: пользователь из Германии попадает на viewport над Берлином, пользователь из Франции — над Парижем.
• По умолчанию на последний viewport пользователя: сохранять viewport между сессиями.
• По умолчанию по данным: если карта показывает результаты поиска, при первоначальном рендеринге подогнать bbox этих результатов.
• По умолчанию по IP-геолокации пользователя: низкая точность, не требует разрешений, хороший запасной вариант.
• Запрашивать геолокацию браузера только по явному согласию пользователя: никогда при первой загрузке без UI-согласия.

Выбор разумного начального viewport — небольшая деталь с большим эффектом на воспринимаемое качество.

Как MapAtlas работает с viewport

Компонент MapAtlas Dynamic Maps раскрывает тот же API getCenter, getZoom, getBearing, getPitch и setView, который предоставляет каждая разработческая веб-карта, с добавлением хостинга только в ЕС и единообразных параметров смещения по viewport в Geocoding и Search endpoints. Подробнее о взаимодействии viewport с тайлами и проекциями: Что такое векторный тайл и Что такое Web Mercator.