В основе Mapbox GL JS лежит тайловая (tile-based) модель рендеринга карт, при которой географическое пространство разбивается на квадратные сегменты фиксированного размера. Эти сегменты — tiles — загружаются и отрисовываются динамически в зависимости от текущего положения карты, масштаба и видимой области.
Каждый тайл представляет собой квадрат в проекции Web Mercator и соответствует конкретной области карты на определённом уровне масштабирования. Такая система обеспечивает высокую производительность, поскольку клиент загружает только те данные, которые необходимы для текущего отображения.
Тайловая сетка формируется по принципу пирамиды:
Каждый следующий уровень увеличивает детализацию, уменьшая площадь
покрытия одного тайла. Тайлы идентифицируются координатами
x, y и уровнем z.
Mapbox GL JS использует этот механизм как для растровых, так и для векторных слоёв, однако векторные тайлы дополнительно содержат структурированные геометрии и стили, применяемые на клиенте.
Параметр bounds задаёт географические границы, в
пределах которых разрешено перемещение карты. Он определяет
прямоугольник в координатах долготы и широты, ограничивая центрирование
и панорамирование.
Формат bounds обычно представляет собой массив:
map.setMaxBounds([
[west, south],
[east, north]
]);Где:
west — минимальная долготаsouth — минимальная широтаeast — максимальная долготаnorth — максимальная широтаПри установке границ карта перестаёт позволять пользователю:
При этом zoom-операции остаются активными, если не ограничены
отдельно через minzoom и maxzoom.
Внутренне Mapbox GL JS корректирует центр карты таким образом, чтобы видимый viewport всегда оставался внутри допустимого прямоугольника, что требует пересчёта координат при каждом изменении состояния камеры.
Параметр minzoom определяет минимальный уровень
увеличения карты, ниже которого пользователь не может уменьшить
масштаб.
map.setMinZoom(5);При попытке уменьшить масштаб ниже установленного значения:
minzoomТак как тайлы привязаны к уровням масштабирования,
minzoom ограничивает доступ к более «глобальным»
представлениям карты. Это особенно важно при работе с кастомными слоями,
где низкие уровни zoom могут содержать агрегированные или упрощённые
данные.
Пример практического эффекта:
minzoom = 10 уровень 0–9 полностью исключается из
рендерингаПараметр maxzoom задаёт верхнюю границу увеличения
карты.
map.setMaxZoom(18);При достижении максимального масштаба:
maxzoomОграничение maxzoom используется для контроля:
На высоких zoom-уровнях количество тайлов экспоненциально возрастает, поэтому ограничение помогает стабилизировать производительность.
bounds, minzoom и maxzoom
работают совместно как система ограничения камеры.
Контролируют:
Контролируют:
При одновременном использовании:
При движении карты на границе bounds происходит обрезка
видимой области. Это влияет на загрузку тайлов:
Векторный рендеринг использует clipping на уровне слоя, где геометрия обрезается по viewport и bounds одновременно.
При каждом изменении масштаба происходит переход между уровнями тайловой пирамиды:
Mapbox GL JS применяет механизм плавного интерполирования между уровнями:
Кеширование играет ключевую роль в производительности:
minzoom или maxzoom часть
кеша становится неактивной, но может быть использована при возврате в
диапазонОграничения zoom фактически определяют границы кешируемого пространства.
При одновременной настройке:
setMaxBoundssetMinZoomsetMaxZoomформируется замкнутая камера с четырьмя ограничениями:
Камера перестаёт быть свободной системой навигации и превращается в детерминированное пространство, где каждое движение проверяется на соответствие ограничениям.
Векторные стили и источники данных часто имеют разные уровни доступности по zoom:
minzoom и maxzoom используются для
согласования этих слоёв, предотвращая ситуации, когда слой активен вне
диапазона доступных данных.
В конфигурации источников:
source: {
type: 'vector',
tiles: ['https://.../{z}/{x}/{y}.pbf'],
minzoom: 0,
maxzoom: 14
}эти параметры задают собственные ограничения источника данных,
которые работают совместно с глобальными minzoom и
maxzoom карты.
Если zoom выходит за пределы источника:
Во время анимаций карты:
Если достигается maxzoom:
Если достигается minzoom:
Zoom в Mapbox GL JS можно интерпретировать как логарифмическую шкалу масштабирования:
Это объясняет экспоненциальный рост количества тайлов:
Ограничения minzoom и maxzoom фактически
обрезают эту экспоненциальную шкалу на определённом диапазоне.