Создание первой карты

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

Первая карта обычно включает три обязательных компонента:

  • HTML-контейнер для отображения карты;
  • слой с картографическими данными;
  • объект карты с настройками отображения.

Даже самый простой проект строится вокруг этих элементов.

Подключение OpenLayers

Современные проекты чаще всего используют OpenLayers через менеджеры пакетов, однако для быстрого старта библиотеку можно подключить напрямую через CDN.

HTML-разметка

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Первая карта OpenLayers</title>

    <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ol/ol.css"
    >

    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>

    <div id="map"></div>

    <script type="module" src="main.js"></script>

</body>
</html>

Ключевым элементом является контейнер:

<div id="map"></div>

Именно внутри него OpenLayers будет отображать карту.

Структура проекта

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

project/
│
├── index.html
└── main.js

Файл index.html содержит разметку страницы, а main.js отвечает за создание и настройку карты.

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

В OpenLayers карта создаётся через класс Map.

Простейший пример:

import Map from 'https://cdn.jsdelivr.net/npm/ol@latest/Map.js';
import View from 'https://cdn.jsdelivr.net/npm/ol@latest/View.js';

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

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

Добавление слоя карты

Карта отображает данные через слои. Наиболее распространённым стартовым вариантом является использование картографического сервиса OpenStreetMap.

Для этого потребуется слой TileLayer и источник данных OSM.

import Map from 'https://cdn.jsdelivr.net/npm/ol@latest/Map.js';
import View from 'https://cdn.jsdelivr.net/npm/ol@latest/View.js';

import TileLayer from 'https://cdn.jsdelivr.net/npm/ol@latest/layer/Tile.js';
import OSM from 'https://cdn.jsdelivr.net/npm/ol@latest/source/OSM.js';

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

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

Разбор параметра target

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

Пример:

target: 'map'

OpenLayers найдёт элемент:

<div id="map"></div>

и разместит внутри него карту.

Также можно передавать ссылку на DOM-элемент напрямую:

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

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

Оба подхода эквивалентны.

Понятие слоя

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

На одной карте может находиться несколько слоёв:

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

Пример массива слоёв:

layers: [
    layer1,
    layer2,
    layer3
]

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

Роль объекта View

Класс View управляет отображаемой областью карты.

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

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

Пример:

view: new View({
    center: [0, 0],
    zoom: 2
})

Если сравнить карту с фотоаппаратом, то слой содержит изображение, а View определяет положение и увеличение объектива.

Координаты центра карты

Многие начинающие разработчики ожидают увидеть центр карты в виде широты и долготы.

Например:

center: [37.6176, 55.7558]

Однако OpenLayers по умолчанию использует проекцию Web Mercator (EPSG:3857), а не географические координаты (EPSG:4326).

Поэтому координаты необходимо преобразовывать.

Для этого используется функция fromLonLat.

import { fromLonLat } from 'https://cdn.jsdelivr.net/npm/ol@latest/proj.js';

Пример для Москвы:

view: new View({
    center: fromLonLat([37.6176, 55.7558]),
    zoom: 10
})

Теперь центр карты будет установлен корректно.

Центрирование карты на конкретном городе

Рассмотрим несколько примеров.

Москва

center: fromLonLat([37.6176, 55.7558])

Санкт-Петербург

center: fromLonLat([30.3351, 59.9343])

Алматы

center: fromLonLat([76.8860, 43.2389])

Астана

center: fromLonLat([71.4304, 51.1282])

Во всех случаях используется порядок:

[долгота, широта]

Это важное правило OpenLayers.

Масштабирование карты

Параметр zoom определяет уровень приближения.

Пример:

zoom: 2

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

Zoom Отображение
1 Почти весь мир
3 Континенты
5 Крупные страны
8 Регионы
10 Города
13 Районы города
16 Улицы
18+ Отдельные здания

Чем больше значение, тем сильнее увеличение.

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

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

Для этого используются параметры:

view: new View({
    center: fromLonLat([37.6176, 55.7558]),
    zoom: 10,
    minZoom: 5,
    maxZoom: 18
})

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

Полный пример первой карты

import Map from 'https://cdn.jsdelivr.net/npm/ol@latest/Map.js';
import View from 'https://cdn.jsdelivr.net/npm/ol@latest/View.js';

import TileLayer from 'https://cdn.jsdelivr.net/npm/ol@latest/layer/Tile.js';
import OSM from 'https://cdn.jsdelivr.net/npm/ol@latest/source/OSM.js';

import { fromLonLat } from 'https://cdn.jsdelivr.net/npm/ol@latest/proj.js';

const map = new Map({
    target: 'map',

    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],

    view: new View({
        center: fromLonLat([37.6176, 55.7558]),
        zoom: 10,
        minZoom: 3,
        maxZoom: 19
    })
});

После загрузки страницы будет отображена карта OpenStreetMap с центром на Москве.

Настройка размеров контейнера

Одной из наиболее распространённых проблем является невидимая карта.

Причина часто заключается в отсутствии высоты контейнера.

Неправильно:

#map {
    width: 100%;
}

В этом случае высота равна нулю.

Правильно:

#map {
    width: 100%;
    height: 500px;
}

Или:

#map {
    width: 100%;
    height: 100vh;
}

Во втором случае карта займёт весь экран браузера.

Полноэкранная карта

Пример оформления:

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

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

Встроенные элементы управления

После создания карты автоматически появляются стандартные элементы интерфейса:

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

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

Проверка объекта карты

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

Например:

console.log(map);

Получение текущего масштаба:

const zoom = map.getView().getZoom();

console.log(zoom);

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

const center = map.getView().getCenter();

console.log(center);

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

map.getView().setZoom(12);

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

map.getView().setCenter(
    fromLonLat([37.6176, 55.7558])
);

Карта обновится автоматически.

Жизненный цикл создания карты

Процесс отображения карты обычно состоит из следующих этапов:

  1. Создание HTML-контейнера.
  2. Подключение библиотеки OpenLayers.
  3. Создание слоя.
  4. Создание объекта View.
  5. Создание объекта Map.
  6. Отображение карты внутри контейнера.
  7. Взаимодействие пользователя с картой.

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

Типичные ошибки при создании первой карты

Не задана высота контейнера

#map {
    width: 100%;
}

Результат — карта не отображается.

Отсутствует слой

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

Результат — пустая область без картографических данных.

Неправильный порядок координат

Неверно:

fromLonLat([55.7558, 37.6176])

Правильно:

fromLonLat([37.6176, 55.7558])

Порядок всегда следующий:

[долгота, широта]

Использование географических координат без преобразования

Неверно:

center: [37.6176, 55.7558]

Правильно:

center: fromLonLat([37.6176, 55.7558])

Преобразование необходимо из системы WGS84 в Web Mercator.

Минимальный рабочий пример

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ol/ol.css">

<style>
html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}
</style>
</head>

<body>

<div id="map"></div>

<script type="module">

import Map from 'https://cdn.jsdelivr.net/npm/ol@latest/Map.js';
import View from 'https://cdn.jsdelivr.net/npm/ol@latest/View.js';

import TileLayer from 'https://cdn.jsdelivr.net/npm/ol@latest/layer/Tile.js';
import OSM from 'https://cdn.jsdelivr.net/npm/ol@latest/source/OSM.js';

import { fromLonLat } from 'https://cdn.jsdelivr.net/npm/ol@latest/proj.js';

new Map({
    target: 'map',

    layers: [
        new TileLayer({
            source: new OSM()
        })
    ],

    view: new View({
        center: fromLonLat([37.6176, 55.7558]),
        zoom: 10
    })
});

</script>

</body>
</html>

Этот пример демонстрирует полный набор базовых компонентов OpenLayers: контейнер карты, слой с данными OpenStreetMap, объект представления (View) и объект карты (Map). На этой основе строятся все более сложные картографические приложения — от отображения отдельных маркеров до полноценных геоинформационных систем.

Оглавление