Пошаговые инструкции

Создание карты в OpenLayers начинается с подключения ядра библиотеки и подготовки DOM-элемента, в котором будет отображаться карта. Основная сущность — объект Map, объединяющий слои, представление и взаимодействия.

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

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

В данном фрагменте формируется минимальная конфигурация:

  • слой тайлов подгружается из OpenStreetMap
  • задаётся глобальная проекция по умолчанию (EPSG:3857)
  • устанавливаются центр и масштаб

Ключевой момент заключается в том, что координаты центра интерпретируются в метрах в проекции Web Mercator, а не в градусах.

Работа с представлением карты (View)

Объект View управляет состоянием отображения: центром, масштабом, вращением и ограничениями перемещения.

import View from 'ol/View.js';

const view = new View({
  center: [0, 0],
  zoom: 3,
  minZoom: 2,
  maxZoom: 18,
  rotation: 0
});

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

view.setCenter([500000, 6000000]);
view.setZoom(10);

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

import { fromLonLat } from 'ol/proj.js';

view.setCenter(fromLonLat([37.6173, 55.7558]));

Здесь используется преобразование из долготы и широты в внутреннюю проекцию карты.

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

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

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

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

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

  • XYZ-сервисы
  • WMTS
  • кастомные тайловые серверы

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

import XYZ from 'ol/source/XYZ.js';

const satelliteLayer = new TileLayer({
  source: new XYZ({
    url: 'https://tile.server/{z}/{x}/{y}.png'
  })
});

Слои могут комбинироваться, образуя многослойную структуру отображения.

Добавление векторных данных

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

import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';

const pointFeature = new Feature({
  geometry: new Point([0, 0])
});

const vectorSource = new VectorSource({
  features: [pointFeature]
});

const vectorLayer = new VectorLayer({
  source: vectorSource
});

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

Загрузка GeoJSON

Одним из наиболее распространённых форматов данных является GeoJSON. OpenLayers предоставляет встроенную поддержку через GeoJSON формат.

import VectorSource from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';

const vectorSource = new VectorSource({
  url: '/data/points.geojson',
  format: new GeoJSON()
});

Структура GeoJSON автоматически преобразуется в объекты Feature. При этом координаты должны соответствовать стандарту WGS84, если не указано иное.

При необходимости можно выполнить ручное преобразование проекции:

new GeoJSON({
  dataProjection: 'EPSG:4326',
  featureProjection: 'EPSG:3857'
});

Стилизация объектов

Визуальное оформление объектов выполняется через объект Style. Он определяет цвет, форму, толщину линий и подписи.

import Style from 'ol/style/Style.js';
import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill.js';
import Stroke from 'ol/style/Stroke.js';

const pointStyle = new Style({
  image: new CircleStyle({
    radius: 6,
    fill: new Fill({
      color: 'red'
    }),
    stroke: new Stroke({
      color: 'white',
      width: 2
    })
  })
});

Применение стиля к слою:

const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: pointStyle
});

Для динамической стилизации используется функция:

const styleFunction = (feature) => {
  const type = feature.get('type');

  return new Style({
    image: new CircleStyle({
      radius: type === 'city' ? 8 : 4,
      fill: new Fill({
        color: type === 'city' ? 'blue' : 'green'
      })
    })
  });
};

Управление взаимодействиями

OpenLayers предоставляет набор взаимодействий: масштабирование, выделение, перемещение.

Добавление стандартных взаимодействий:

import defaults from 'ol/interaction/defaults.js';

const map = new Map({
  interactions: defaults()
});

Выделение объектов реализуется через Select:

import Sel ect from 'ol/interaction/Sel ect.js';

const sel ect = new Sel ect();
map.addInteraction(sel ect);

Обработка выбора:

sel ect.on('select', (event) => {
  const selectedFeatures = event.selected;
});

Добавление контролов интерфейса

Контролы обеспечивают элементы управления картой: масштаб, полноэкранный режим, атрибуция.

import Zoom fr om 'ol/control/Zoom.js';
import FullScreen fr om 'ol/control/FullScreen.js';

map.addControl(new Zoom());
map.addControl(new FullScreen());

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

Обработка событий карты

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

map.on('click', (event) => {
  const coordinate = event.coordinate;
});

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

map.on('singleclick', (event) => {
  map.forEachFeatureAtPixel(event.pixel, (feature) => {
    const properties = feature.getProperties();
  });
});

Также доступны события перемещения и изменения масштаба:

map.getView().on('change:resolution', () => {
  const zoom = map.getView().getZoom();
});

Работа с координатами и проекциями

Система координат является фундаментальной частью архитектуры OpenLayers. Основная проекция — EPSG:3857.

Преобразование между системами координат:

import { transform } fr om 'ol/proj.js';

const coord = transform([37.6173, 55.7558], 'EPSG:4326', 'EPSG:3857');

Обратное преобразование:

import { toLonLat } fr om 'ol/proj.js';

const lonLat = toLonLat([500000, 6000000]);

Ошибки в выборе проекции приводят к смещению объектов и некорректному отображению данных.

Динамическое обновление слоёв

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

vectorSource.clear();
vectorSource.addFeature(new Feature({
  geometry: new Point([1000000, 1000000])
}));

Перезагрузка данных из источника:

vectorSource.refresh();

Для тайловых слоёв:

tileLayer.getSource().refresh();

Комбинирование нескольких слоёв

Архитектура OpenLayers предполагает наложение слоёв в порядке их объявления.

const map = new Map({
  layers: [
    baseLayer,
    satelliteLayer,
    vectorLayer
  ]
});

Слои могут управляться динамически:

map.removeLayer(satelliteLayer);
map.addLayer(satelliteLayer);

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

Оптимизация отображения

При работе с большим количеством объектов применяется кластеризация.

import Cluster fr om 'ol/source/Cluster.js';

const clusterSource = new Cluster({
  distance: 40,
  source: vectorSource
});

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

Дополнительно используются:

  • ограничение области перерисовки
  • упрощение геометрий
  • отключение ненужных слоёв на малых масштабах

Работа с оверлеями

Оверлеи позволяют размещать HTML-элементы поверх карты.

import Overlay fr om 'ol/Overlay.js';

const overlay = new Overlay({
  element: document.getElementById('popup'),
  positioning: 'bottom-center',
  offset: [0, -10]
});

map.addOverlay(overlay);

Установка позиции:

overlay.setPosition([500000, 6000000]);

Оверлеи используются для всплывающих окон, подсказок и интерактивных панелей.

Подключение пользовательских источников данных

OpenLayers поддерживает интеграцию с внешними API через кастомные загрузчики.

const vectorSource = new VectorSource({
  loader: (extent, resolution, projection) => {
    fetch('/api/features')
      .then(response => response.json())
      .then(data => {
        const features = new GeoJSON().readFeatures(data);
        vectorSource.addFeatures(features);
      });
  }
});

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

Управление состоянием карты

Состояние карты может сохраняться и восстанавливаться:

const view = map.getView();

const state = {
  center: view.getCenter(),
  zoom: view.getZoom(),
  rotation: view.getRotation()
};

Восстановление состояния:

view.setCenter(state.center);
view.setZoom(state.zoom);
view.setRotation(state.rotation);

Это позволяет синхронизировать карту с внешними интерфейсами и сохранять пользовательские настройки отображения.

Оглавление