OverviewMap

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

OverviewMap является экземпляром класса ol/control/OverviewMap и включается в систему управления картой как обычный контрол. Он работает поверх отдельного экземпляра карты, встроенного внутрь контроллера, и использует собственный набор слоёв.

Ключевые особенности:

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

Внутренняя структура включает:

  • отдельный объект карты;
  • набор слоёв (обычно тайловых);
  • прямоугольник экстента, синхронизируемый с основным view;
  • UI-контейнер управления состоянием (развёрнут/свёрнут).

Базовая инициализация

Создание OverviewMap выполняется через передачу параметров в конструктор:

import OverviewMap from 'ol/control/OverviewMap.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

const overviewMapControl = new OverviewMap({
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  collapsed: false
});

Далее контрол добавляется к карте:

map.addControl(overviewMapControl);

Синхронизация с основным представлением

Связь между основной картой и мини-картой реализуется через механизм синхронизации view. Основной объект ol/View передаёт изменения состояния:

  • центр карты;
  • масштаб (resolution);
  • вращение (rotation);
  • географический экстент.

Мини-карта автоматически обновляет прямоугольник текущего видимого региона.

При изменении масштаба основной карты OverviewMap пересчитывает геометрию bounding box, проецируя его в собственную систему координат.

Конфигурация слоёв

Мини-карта может использовать отдельный набор слоёв, отличающийся от основной карты. Это особенно важно для производительности и читаемости.

Пример настройки:

const overviewMapControl = new OverviewMap({
  layers: [
    new TileLayer({
      source: new OSM(),
      visible: true
    })
  ]
});

Допускается использование облегчённых слоёв:

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

Параметры поведения

OverviewMap поддерживает набор опций, управляющих пользовательским интерфейсом и состоянием:

  • collapsed — начальное состояние (свёрнут/развёрнут);
  • collapseLabel — текст или символ кнопки сворачивания;
  • label — текст кнопки разворачивания;
  • tipLabel — всплывающая подсказка;
  • rotateWithView — синхронизация вращения.

Пример:

const overviewMapControl = new OverviewMap({
  collapsed: true,
  collapseLabel: '−',
  label: '+',
  tipLabel: 'Мини-карта',
  rotateWithView: true
});

Работа с вращением карты

При включённой опции rotateWithView мини-карта синхронизирует угол поворота с основной картой. Это влияет на отображение экстента:

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

При отключении вращение игнорируется, и мини-карта остаётся ориентированной на север.

Геометрия экстента

Отображаемый прямоугольник рассчитывается на основе текущего view.getExtent(). Далее происходит трансформация координат:

  1. получение границ в проекции основной карты;
  2. преобразование в проекцию мини-карты;
  3. построение геометрии полигона;
  4. отрисовка слоя оверлея.

Этот процесс выполняется при каждом изменении состояния карты.

Пользовательское взаимодействие

Мини-карта поддерживает интерактивное управление:

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

Механизм взаимодействия основан на обработке pointer-событий внутри отдельного view мини-карты.

При перемещении рамки выполняется обратное преобразование координат и установка нового центра основной карты.

Кастомизация отображения

Визуальная часть OverviewMap может быть изменена через CSS и настройки слоёв.

Основные элементы DOM:

  • контейнер ol-overviewmap;
  • кнопка переключения;
  • canvas мини-карты;
  • overlay-элемент экстента.

Пример стилизации:

.ol-overviewmap {
  bottom: 10px;
  left: 10px;
}

.ol-overviewmap .ol-overviewmap-box {
  border: 2px solid rgba(255, 0, 0, 0.7);
}

Использование с разными проекциями

Мини-карта может использовать другую систему координат, чем основная карта. В этом случае выполняется автоматическое преобразование:

  • EPSG:3857 → EPSG:4326;
  • локальные проекции;
  • пользовательские CRS.

Важно учитывать согласование источников данных, иначе возможны искажения экстента.

Производительность и оптимизация

OverviewMap может влиять на производительность при использовании тяжёлых слоёв. Основные рекомендации:

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

При высокой частоте изменений масштаба полезно кэширование тайлов.

Событийная модель

OverviewMap генерирует события через внутреннюю карту и контроллер:

  • изменение состояния collapse/expand;
  • обновление view;
  • взаимодействие с пользователем.

Пример подписки:

overviewMapControl.on('change:collapsed', function () {
  console.log('Состояние мини-карты изменилось');
});

Интеграция с основным map объектом

Контрол связывается с основной картой через map.addControl. После добавления он получает доступ к:

  • текущему view;
  • списку слоёв;
  • системе проекций;
  • размерам контейнера.

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

Поведение при изменении размера

При ресайзе окна мини-карта адаптирует своё отображение. Это включает:

  • перерасчёт canvas;
  • обновление тайлов;
  • синхронизацию экстента.

При сильном изменении размера возможно кратковременное пересчитывание слоёв, особенно при использовании растровых источников.

Комбинирование с другими контролами

OverviewMap часто используется совместно с:

  • Zoom;
  • Rotate;
  • FullScreen;
  • ScaleLine.

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

Расширенные сценарии использования

В сложных приложениях OverviewMap может использоваться как:

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

В таких сценариях часто применяется кастомная логика:

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