Ограничение области просмотра

Контроль области просмотра в веб-картах — ключевой механизм, позволяющий ограничить перемещение пользователя, задать допустимые границы карты и сформировать предсказуемое поведение интерфейса. В экосистеме Mapbox такие ограничения реализуются на уровне камеры карты и взаимодействия пользователя с жестами, управлением и программными методами API.

Mapbox GL JS предоставляет несколько независимых, но взаимодействующих уровней ограничения: географические границы, ограничения масштаба, управление вращением и наклоном, а также контроль поведения интерактивных жестов.

Географические границы карты (maxBounds)

Основной механизм ограничения перемещения карты — параметр maxBounds. Он задаёт прямоугольную область, за пределы которой камера не может выйти.

Используется объект LngLatBounds, определяющий юго-западную и северо-восточную точки:

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [69.2401, 41.2995],
  zoom: 5,
  maxBounds: [
    [60.0, 35.0],  // юго-запад
    [75.0, 45.0]   // северо-восток
  ]
});

Поведение maxBounds

  • ограничивает панорамирование (dragPan)
  • предотвращает выход центра карты за заданный прямоугольник
  • не блокирует масштабирование напрямую
  • допускает «упругость» при перетаскивании до границы

Программное изменение границ

После создания карты границы можно изменить динамически:

map.setMaxBounds([
  [61.0, 36.0],
  [74.0, 44.0]
]);

Удаление ограничения:

map.setMaxBounds(null);

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

Ограничение масштаба (minZoom и maxZoom)

Контроль области просмотра невозможен без ограничения уровня приближения. Параметры minZoom и maxZoom задают диапазон допустимого масштабирования.

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v11',
  center: [69.2401, 41.2995],
  zoom: 6,
  minZoom: 4,
  maxZoom: 12
});

Поведение ограничений масштаба

  • zoom ниже minZoom блокируется

  • zoom выше maxZoom недоступен

  • ограничения применяются ко всем способам изменения масштаба:

    • колесо мыши
    • pinch gesture
    • кнопки zoom
    • программный map.zoomTo()

Программное управление масштабом

map.setMinZoom(3);
map.setMaxZoom(14);

Контроль диапазона zoom часто используется при:

  • отображении административных границ
  • работе с тайловыми слоями разной детализации
  • предотвращении «провала» в пустоту на высоких увеличениях

Ограничение вращения и наклона

Хотя географическая область ограничивает перемещение, визуальная область также зависит от угла обзора.

Ограничение вращения

map.dragRotate.disable();
map.touchZoomRotate.disableRotation();

Полное отключение вращения:

map.setRenderWorldCopies(false);

Ограничение наклона

map.setPitch(0);
map.setMaxPitch(30);
  • pitch — угол наклона камеры
  • maxPitch ограничивает максимальный наклон
  • чрезмерный наклон может нарушить восприятие ограниченной области

Управление копиями мира (renderWorldCopies)

Глобусная проекция и мировые тайлы могут повторяться по горизонтали. Это поведение контролируется параметром renderWorldCopies.

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [0, 20],
  zoom: 2,
  renderWorldCopies: false
});

Значение параметра

  • true — карта повторяется по оси X (бесконечная прокрутка)
  • false — ограниченная одна «копия мира»

Использование false важно при:

  • отображении региональных карт
  • строгих геополитических границах
  • визуализациях, где повторение мира вводит в заблуждение

Ограничение панорамирования и жестов

Отключение перемещения карты

map.dragPan.disable();

или частичное ограничение:

map.dragPan.enable();

Управление масштабированием жестами

map.scrollZoom.disable();
map.boxZoom.disable();
map.doubleClickZoom.disable();

Каждый тип взаимодействия отключается отдельно, что позволяет точно настраивать UX:

  • scrollZoom — колесо мыши
  • boxZoom — выделение области
  • doubleClickZoom — двойной клик
  • touchZoomRotate — жесты на мобильных устройствах

Кооперативные жесты (cooperativeGestures)

В некоторых сценариях требуется предотвратить случайное масштабирование при прокрутке страницы:

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [69.2401, 41.2995],
  zoom: 5,
  cooperativeGestures: true
});

Эффект

  • zoom колесом мыши требует нажатия Ctrl (или Cmd)
  • снижает конфликт между прокруткой страницы и картой
  • повышает управляемость интерфейса в документах

Ограничение области через fitBounds

Метод fitBounds позволяет программно задать отображаемую область и автоматически подогнать масштаб.

map.fitBounds([
  [68.0, 40.0],
  [71.0, 43.0]
], {
  padding: 40
});

Параметры

  • padding — отступы от краёв
  • maxZoom — ограничение приближения при подгонке
  • linear — линейная интерполяция камеры
  • duration — анимация перехода
map.fitBounds(bounds, {
  padding: 20,
  maxZoom: 10,
  duration: 1200
});

Комбинирование maxBounds и fitBounds

В сложных интерфейсах часто используется комбинация:

  • maxBounds — жёсткое ограничение перемещения
  • fitBounds — программная навигация внутри этих границ

Пример сценария:

  • карта ограничена страной
  • пользователь переключается между регионами
  • fitBounds анимирует переход внутри допустимой области

Ограничение области через события камеры

Mapbox GL JS предоставляет низкоуровневый контроль через события move, moveend и movestart.

map.on('move', () => {
  const center = map.getCenter();

  if (center.lng < 60) {
    map.setCenter([60, center.lat]);
  }
});

Особенности подхода

  • позволяет реализовать нестандартные ограничения
  • требует ручной коррекции состояния камеры
  • может конфликтовать с внутренними ограничениями Mapbox

Камера как ограничиваемая система координат

Внутренне карта представляет собой камеру с параметрами:

  • center — центр обзора
  • zoom — масштаб
  • bearing — вращение
  • pitch — наклон

Каждый параметр может быть ограничен:

map.setMinZoom(4);
map.setMaxZoom(10);
map.setMaxPitch(45);

Эти ограничения образуют многомерное пространство допустимых состояний камеры.

Практика построения строгих региональных карт

При создании карт, привязанных к конкретной стране или региону, применяется комплекс ограничений:

const bounds = [
  [60.0, 35.0],
  [75.0, 45.0]
];

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/outdoors-v12',
  center: [67.5, 40.0],
  zoom: 6,
  minZoom: 5,
  maxZoom: 10,
  maxBounds: bounds,
  renderWorldCopies: false
});

Дополнительно отключаются жесты:

map.scrollZoom.disable();
map.boxZoom.disable();

Такой набор параметров формирует строго ограниченное «окно» в геопространстве, исключающее выход пользователя за заданные координаты.

Ограничения и особенности поведения камеры

Несмотря на наличие maxBounds, поведение камеры имеет нюансы:

  • при инерционном движении карта может кратковременно выходить за границы
  • анимации flyTo могут временно игнорировать ограничения
  • при резком изменении масштаба границы пересчитываются

Эти особенности связаны с системой плавной интерполяции камеры внутри Mapbox GL JS.

Контроль области в мультитач и мобильных сценариях

На мобильных устройствах ограничения особенно важны:

  • pinch zoom комбинируется с pan
  • rotation жестами требует отдельного контроля
  • случайные выходы за границы происходят чаще

Используются комбинации:

map.touchZoomRotate.disableRotation();
map.dragPan.enable();
map.setMaxBounds(bounds);

Согласование ограничений с визуальным стилем

Ограничение области просмотра тесно связано со стилем карты:

  • светлые стили требуют более мягких границ
  • тёмные стили часто используют строгие региональные ограничения
  • 3D-слои усиливают необходимость контроля maxPitch

В рамках платформы Mapbox эти параметры интегрируются в стиль и поведение камеры как единая система визуального контроля.

Оглавление