Кнопки масштабирования

В библиотеке HERE Maps API для JavaScript управление масштабированием карты реализовано через встроенные элементы UI и программный API карты. Кнопки увеличения и уменьшения масштаба являются частью стандартного набора интерфейсных контролов и тесно связаны с объектом H.ui.UI, который отвечает за визуальные элементы управления картой.

В стандартной конфигурации карты кнопки масштабирования добавляются автоматически при включении UI-компонентов. Основной механизм основан на использовании H.ui.UI.createDefault и подключении набора контролов по умолчанию.

const platform = new H.service.Platform({
  apikey: 'YOUR_API_KEY'
});

const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(
  document.getElementById('map'),
  defaultLayers.vector.normal.map,
  {
    center: { lat: 52.5200, lng: 13.4050 },
    zoom: 10,
    pixelRatio: window.devicePixelRatio || 1
  }
);

const ui = H.ui.UI.createDefault(map, defaultLayers);

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

ZoomControl как отдельный компонент

Кнопки масштабирования в HERE Maps представлены компонентом H.ui.ZoomControl. Он может быть создан и добавлен в интерфейс вручную, что позволяет более гибко управлять расположением и поведением.

const zoomControl = new H.ui.ZoomControl({
  alignment: H.ui.LayoutAlignment.RIGHT_BOTTOM
});

ui.addControl('zoomControl', zoomControl);

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

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

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

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

const ui = H.ui.UI.create(map);

Такой вариант создаёт пустой UI без стандартных элементов, включая zoom-кнопки.

Выборочное управление контролами

При использовании createDefault можно переопределить набор контролов:

const ui = H.ui.UI.createDefault(map, defaultLayers, {
  zoom: false,
  scalebar: true,
  panorama: true
});

Отключение zoom: false убирает кнопки масштабирования, сохраняя остальные элементы интерфейса.

Позиционирование кнопок масштабирования

Компонент H.ui.ZoomControl поддерживает различные варианты размещения на карте через H.ui.LayoutAlignment.

Доступные позиции:

  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_BOTTOM
  • RIGHT_BOTTOM

Пример размещения в левом верхнем углу:

const zoomControl = new H.ui.ZoomControl({
  alignment: H.ui.LayoutAlignment.LEFT_TOP
});

ui.addControl('zoomControl', zoomControl);

Изменение позиции влияет только на визуальное расположение, не затрагивая логику масштабирования.

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

Помимо кнопок интерфейса, масштаб карты может изменяться программно через API объекта H.Map.

Увеличение и уменьшение масштаба

map.setZoom(map.getZoom() + 1);
map.setZoom(map.getZoom() - 1);

Плавное изменение масштаба

map.setZoom(map.getZoom() + 1, true);

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

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

Кнопки масштабирования подчиняются ограничениям min и max zoom уровням, заданным при создании карты.

const map = new H.Map(
  document.getElementById('map'),
  defaultLayers.vector.normal.map,
  {
    center: { lat: 52.5200, lng: 13.4050 },
    zoom: 10,
    min: 5,
    max: 18
  }
);

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

Интеграция кастомных кнопок масштабирования

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

const zoomInBtn = document.getElementById('zoomIn');
const zoomOutBtn = document.getElementById('zoomOut');

zoomInBtn.addEventListener('click', () => {
  map.setZoom(map.getZoom() + 1, true);
});

zoomOutBtn.addEventListener('click', () => {
  map.setZoom(map.getZoom() - 1, true);
});

Такой подход позволяет полностью контролировать внешний вид и поведение элементов управления масштабом.

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

Изменение масштаба карты может быть отслежено через события объекта H.Map.

map.addEventListener('mapviewchangeend', () => {
  console.log('Текущий zoom:', map.getZoom());
});

Событие mapviewchangeend срабатывает после завершения изменения масштаба, что удобно для синхронизации интерфейса.

Особенности работы на мобильных устройствах

На сенсорных устройствах кнопки масштабирования часто дублируют жесты pinch-to-zoom. В HERE Maps API оба механизма работают совместно, но кнопки UI остаются актуальными для пользователей, которым удобнее точечное управление.

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

map.getBehavior().disable(H.mapevents.Behavior.Feature.PINCH_ZOOM);

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

Взаимодействие с поведением карты

Кнопки масштабирования работают через H.mapevents.Behavior, который обрабатывает все пользовательские взаимодействия. При изменении масштаба через UI фактически вызываются методы поведения карты, что обеспечивает согласованность между жестами, программным API и интерфейсными элементами.

Оглавление