Структура объекта Map

Объект Map является центральным элементом библиотеки OpenLayers. Именно он объединяет все остальные компоненты картографического приложения: слои, источники данных, элементы управления, взаимодействия, представление карты и механизмы отображения.

Экземпляр карты создаётся через класс Map:

import Map from 'ol/Map.js';

const map = new Map({
    target: 'map'
});

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

Общая структура объекта Map

Конфигурация карты обычно состоит из нескольких основных частей:

const map = new Map({
    target: 'map',
    layers: [],
    view: view,
    controls: [],
    interactions: [],
    overlays: []
});

Каждое свойство отвечает за отдельный аспект работы карты.

Свойство Назначение
target Контейнер для отображения карты
layers Список слоёв
view Представление карты
controls Элементы управления
interactions Пользовательские взаимодействия
overlays Всплывающие элементы поверх карты

Свойство target

Свойство target определяет HTML-элемент, внутри которого будет отображаться карта.

Наиболее распространённый вариант — передача идентификатора элемента.

<div id="map"></div>
const map = new Map({
    target: 'map'
});

Допустимо передавать непосредственно DOM-объект:

const container = document.getElementById('map');

const map = new Map({
    target: container
});

Изменить контейнер можно после создания карты:

map.setTarget('newMap');

Получение текущего контейнера:

const target = map.getTarget();

или

const element = map.getTargetElement();

Свойство view

Объект View определяет состояние просмотра карты.

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

  • центр карты;
  • масштаб;
  • разрешение;
  • вращение;
  • ограничения навигации.

Пример:

import View from 'ol/View.js';

const view = new View({
    center: [0, 0],
    zoom: 4
});

const map = new Map({
    target: 'map',
    view: view
});

Структурно связь выглядит следующим образом:

Map
 └── View
      ├── Center
      ├── Zoom
      ├── Resolution
      └── Rotation

Получение объекта представления:

const view = map.getView();

Изменение центра:

view.setCenter([1000000, 7000000]);

Изменение масштаба:

view.setZoom(10);

Свойство layers

Слои являются одним из ключевых компонентов карты.

Каждый слой представляет отдельный источник визуальных данных.

Типичная структура:

Map
 └── Layers
      ├── TileLayer
      ├── VectorLayer
      ├── ImageLayer
      └── WebGLTileLayer

Пример подключения слоя:

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

const layer = new TileLayer({
    source: new OSM()
});

const map = new Map({
    target: 'map',
    layers: [layer]
});

Получение коллекции слоёв:

const layers = map.getLayers();

Добавление слоя:

map.addLayer(layer);

Удаление слоя:

map.removeLayer(layer);

Коллекция слоёв

Метод getLayers() возвращает объект Collection.

const layers = map.getLayers();

Получение количества слоёв:

console.log(layers.getLength());

Получение слоя по индексу:

const firstLayer = layers.item(0);

Добавление через коллекцию:

layers.push(newLayer);

Удаление:

layers.remove(layer);

Таким образом карта фактически хранит не массив, а специальную коллекцию OpenLayers.

Свойство controls

Элементы управления представляют пользовательский интерфейс карты.

Стандартный набор включает:

  • масштабирование;
  • поворот;
  • отображение атрибуции.

Пример:

import {defaults as defaultControls} from 'ol/control.js';

const map = new Map({
    target: 'map',
    controls: defaultControls()
});

Структура:

Map
 └── Controls
      ├── Zoom
      ├── Rotate
      └── Attribution

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

const controls = map.getControls();

Добавление нового элемента:

map.addControl(control);

Удаление:

map.removeControl(control);

Свойство interactions

Взаимодействия определяют реакцию карты на действия пользователя.

Типовые взаимодействия:

  • перемещение карты;
  • масштабирование колесом мыши;
  • масштабирование двойным щелчком;
  • вращение карты;
  • выделение объектов.

Структура:

Map
 └── Interactions
      ├── DragPan
      ├── MouseWheelZoom
      ├── DoubleClickZoom
      └── DragRotate

Создание карты:

import {defaults as defaultInteractions} from 'ol/interaction.js';

const map = new Map({
    target: 'map',
    interactions: defaultInteractions()
});

Получение списка взаимодействий:

const interactions = map.getInteractions();

Добавление нового взаимодействия:

map.addInteraction(interaction);

Удаление:

map.removeInteraction(interaction);

Свойство overlays

Наложения (Overlay) используются для размещения HTML-элементов поверх карты.

Наиболее частые варианты использования:

  • всплывающие окна;
  • карточки объектов;
  • информационные панели;
  • маркеры на основе HTML.

Пример:

import Overlay from 'ol/Overlay.js';

const popup = new Overlay({
    element: document.getElementById('popup')
});

const map = new Map({
    target: 'map',
    overlays: [popup]
});

Структура:

Map
 └── Overlays
      ├── Popup
      ├── Tooltip
      └── Marker

Добавление наложения:

map.addOverlay(popup);

Получение коллекции:

const overlays = map.getOverlays();

Удаление:

map.removeOverlay(popup);

Внутренние компоненты рендеринга

Помимо видимых объектов карта содержит набор внутренних компонентов.

Упрощённая схема выглядит следующим образом:

Map
 ├── View
 ├── Layers
 ├── Controls
 ├── Interactions
 ├── Overlays
 ├── Renderer
 ├── Event System
 └── Layer Manager

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

Система событий карты

Объект Map наследует механизм событий OpenLayers.

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

Подписка на событие:

map.on('moveend', function() {
    console.log('Перемещение завершено');
});

Некоторые важные события:

Событие Описание
click Щелчок по карте
dblclick Двойной щелчок
moveend Завершение перемещения
pointermove Движение указателя
postrender Завершение отрисовки
loadstart Начало загрузки данных
loadend Завершение загрузки данных

Пример обработки щелчка:

map.on('click', function(event) {
    console.log(event.coordinate);
});

Размер карты

Объект карты хранит информацию о размерах области отображения.

Получение текущего размера:

const size = map.getSize();

Результат:

[ширина, высота]

Например:

[1200, 800]

После изменения размеров контейнера требуется обновление:

map.updateSize();

Это особенно важно при динамическом изменении интерфейса.

Работа с координатами через объект Map

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

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

const pixel = map.getPixelFromCoordinate(
    [1000000, 7000000]
);

Преобразование пикселя в координату:

const coordinate = map.getCoordinateFromPixel(
    [300, 250]
);

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

Иерархия объектов внутри Map

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

Map
│
├── Target
│
├── View
│   ├── Center
│   ├── Zoom
│   ├── Resolution
│   └── Rotation
│
├── Layers
│   ├── TileLayer
│   ├── VectorLayer
│   ├── ImageLayer
│   └── WebGLLayer
│
├── Controls
│   ├── Zoom
│   ├── Rotate
│   └── Attribution
│
├── Interactions
│   ├── DragPan
│   ├── MouseWheelZoom
│   ├── Select
│   └── Modify
│
├── Overlays
│   ├── Popup
│   ├── Tooltip
│   └── Marker
│
├── Renderer
│
└── Event System

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

Оглавление