Отключение стандартных обработчиков

При создании экземпляра карты Mapbox GL JS автоматически подключает набор обработчиков пользовательского взаимодействия. Они отвечают за масштабирование колесом мыши, перемещение карты перетаскиванием, вращение, изменение наклона, масштабирование двойным щелчком и другие действия.

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

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

Каждый встроенный обработчик может быть отключён независимо от остальных.

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

Экземпляр объекта Map содержит несколько встроенных обработчиков.

Обработчик Назначение
scrollZoom Масштабирование колесом мыши
boxZoom Масштабирование выделением области
dragRotate Вращение карты правой кнопкой мыши
dragPan Перемещение карты перетаскиванием
keyboard Управление с клавиатуры
doubleClickZoom Масштабирование двойным щелчком
touchZoomRotate Масштабирование и вращение жестами
touchPitch Изменение наклона карты жестами

Каждый обработчик предоставляет методы:

enable()
disable()
isEnabled()

Отключение масштабирования колесом мыши

Масштабирование колесом является одним из наиболее часто используемых способов навигации. В некоторых интерфейсах оно вызывает проблемы, поскольку пользователь может случайно изменять масштаб при прокрутке страницы.

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

map.scrollZoom.disable();

Проверка состояния:

console.log(map.scrollZoom.isEnabled());

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

map.scrollZoom.enable();

После отключения колесо мыши продолжит прокручивать страницу, но не будет влиять на карту.

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

Перетаскивание карты отвечает за изменение её центра посредством удержания левой кнопки мыши.

Отключение:

map.dragPan.disable();

Включение:

map.dragPan.enable();

После отключения пользователь не сможет перемещать карту мышью или пальцем.

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

Отключение масштабирования двойным щелчком

По умолчанию двойной щелчок увеличивает масштаб карты.

Для отключения:

map.doubleClickZoom.disable();

Для повторного включения:

map.doubleClickZoom.enable();

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

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

Mapbox GL JS поддерживает вращение карты вокруг вертикальной оси.

Отключение:

map.dragRotate.disable();

Включение:

map.dragRotate.enable();

После отключения карта сохраняет текущий угол поворота, но пользователь больше не сможет его изменять.

Если требуется вернуть северное направление:

map.resetNorth();

Отключение масштабирования выделением области

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

Отключение:

map.boxZoom.disable();

Включение:

map.boxZoom.enable();

Функция редко используется обычными пользователями, поэтому её отключение практически не влияет на удобство работы.

Отключение управления с клавиатуры

Mapbox GL JS поддерживает управление клавишами:

  • стрелки для перемещения;
  • + и - для изменения масштаба;
  • комбинации для вращения и наклона.

Полное отключение:

map.keyboard.disable();

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

map.keyboard.enable();

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

Отключение жестов на сенсорных устройствах

На мобильных устройствах активно используется обработчик touchZoomRotate.

Он отвечает за:

  • масштабирование двумя пальцами;
  • вращение карты жестами.

Отключение:

map.touchZoomRotate.disable();

Включение:

map.touchZoomRotate.enable();

После отключения жесты масштабирования перестают работать.

Отключение только вращения на сенсорных экранах

Иногда требуется сохранить масштабирование, но запретить вращение.

Для этого существует специальный метод:

map.touchZoomRotate.disableRotation();

Теперь карта будет реагировать на масштабирование, но не на вращение.

Возврат стандартного поведения:

map.touchZoomRotate.enableRotation();

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

Отключение изменения наклона карты

В версиях библиотеки, поддерживающих отдельный обработчик наклона, используется объект touchPitch.

Отключение:

map.touchPitch.disable();

Включение:

map.touchPitch.enable();

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

Полное отключение всех взаимодействий

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

map.scrollZoom.disable();
map.boxZoom.disable();
map.dragRotate.disable();
map.dragPan.disable();
map.keyboard.disable();
map.doubleClickZoom.disable();
map.touchZoomRotate.disable();
map.touchPitch.disable();

В результате карта будет отображаться, но пользователь не сможет изменять её состояние.

Создание карты только для просмотра

Распространённый сценарий — информационная карта, на которой разрешено только перемещение.

Например, можно запретить масштабирование и вращение:

map.scrollZoom.disable();
map.doubleClickZoom.disable();
map.touchZoomRotate.disable();
map.dragRotate.disable();

При этом пользователь сможет перемещать карту:

map.dragPan.enable();

Такой режим обеспечивает контролируемое взаимодействие без риска потерять нужный масштаб.

Динамическое включение и отключение обработчиков

Обработчики можно изменять в любой момент после создания карты.

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

function enableEditing() {
    map.dragPan.enable();
    map.scrollZoom.enable();
}

function disableEditing() {
    map.dragPan.disable();
    map.scrollZoom.disable();
}

Вызов функций может зависеть от роли пользователя, текущего режима интерфейса или состояния приложения.

Проверка состояния обработчика

Каждый обработчик предоставляет метод isEnabled().

Пример:

if (map.scrollZoom.isEnabled()) {
    console.log('Масштабирование активно');
}

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

Отключение обработчиков при создании карты

Некоторые параметры можно задавать ещё на этапе инициализации карты.

Пример:

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [37.6176, 55.7558],
    zoom: 10,
    dragPan: false,
    scrollZoom: false,
    doubleClickZoom: false
});

Такой подход предотвращает даже кратковременную активацию обработчиков после загрузки карты.

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

Для полного отключения взаимодействия существует специальная настройка:

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    interactive: false
});

В этом режиме:

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

Например, масштаб можно изменять из кода:

map.setZoom(8);

Даже при отключённой интерактивности методы объекта Map продолжают работать.

Повторное включение интерактивности после interactive: false

Если карта была создана как неинтерактивная, необходимые обработчики можно включить вручную.

map.dragPan.enable();
map.scrollZoom.enable();

Таким образом можно сформировать собственный набор разрешённых действий.

Практический пример настройки пользовательских ограничений

Следующий пример создаёт карту, на которой разрешено только перемещение без вращения и изменения масштаба:

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v11',
    center: [30.3158, 59.9398],
    zoom: 12
});

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

Пользователь сможет перемещать карту, сохраняя фиксированный масштаб и ориентацию.

Типичные сценарии отключения обработчиков

Информационные панели

interactive: false

Карта используется исключительно как визуальный элемент.

Карта внутри прокручиваемой страницы

map.scrollZoom.disable();

Исключается случайное изменение масштаба при прокрутке.

Мобильная карта без вращения

map.touchZoomRotate.disableRotation();

Сохраняется привычная навигация без потери ориентации.

Режим презентации

map.dragPan.disable();
map.scrollZoom.disable();
map.keyboard.disable();

Положение карты контролируется только программно.

Редактор с временной блокировкой навигации

map.dragPan.disable();

Используется во время рисования объектов или редактирования геометрии.

Особенности работы обработчиков

Несколько важных моментов:

  • отключение обработчика не удаляет его из объекта карты;
  • обработчики можно включать и выключать неограниченное количество раз;
  • отключение пользовательских действий не влияет на методы API;
  • программное изменение центра, масштаба, вращения и наклона остаётся доступным;
  • разные обработчики независимы друг от друга;
  • настройки можно менять как во время инициализации, так и после полной загрузки карты.

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

Оглавление