WMS сервисы

WMS (Web Map Service) — стандарт публикации картографических данных, разработанный организацией OGC (Open Geospatial Consortium). В отличие от векторных источников и растровых тайлов XYZ, WMS генерирует изображение карты на сервере в момент запроса.

MapLibre GL JS ориентирован прежде всего на работу с векторными и растровыми тайлами, однако WMS-сервисы также могут использоваться в качестве источников данных через механизм растровых слоёв.

Основные преимущества WMS:

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

Недостатки:

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

Принцип работы WMS

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

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

Сервер формирует изображение и возвращает его клиенту.

Типичный WMS-запрос выглядит следующим образом:

https://server.example.com/wms?
service=WMS&
request=GetMap&
layers=roads&
bbox=10,20,30,40&
width=256&
height=256&
format=image/png

MapLibre GL JS отображает полученное изображение как растровый слой.

Основные операции WMS

Стандарт WMS определяет несколько операций.

GetCapabilities

Возвращает описание сервиса.

Пример:

https://server.example.com/wms?service=WMS&request=GetCapabilities

Ответ содержит:

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

GetMap

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

Параметры:

Параметр	Назначение
service	Тип сервиса
version	Версия WMS
request	Тип запроса
layers	Список слоёв
styles	Стили отображения
bbox	Границы карты
width	Ширина изображения
height	Высота изображения
crs/srs	Система координат
format	Формат изображения

GetFeatureInfo

Позволяет получать информацию об объектах на карте.

Запрос отправляется после клика по изображению.

Пример:

https://server.example.com/wms?
service=WMS&
request=GetFeatureInfo&
layers=buildings&
query_layers=buildings&
i=150&
j=200

Ответ может содержать:

HTML;
XML;
JSON;
текстовые данные.

Подключение WMS в MapLibre GL JS

MapLibre напрямую не поддерживает WMS как отдельный тип источника, однако WMS можно использовать через растровый источник (raster source).

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

map.addSource('wms-source', {
    type: 'raster',
    tiles: [
        'https://server.example.com/wms?' +
        'service=WMS' +
        '&version=1.1.1' +
        '&request=GetMap' +
        '&layers=my_layer' +
        '&styles=' +
        '&format=image/png' +
        '&transparent=true' +
        '&srs=EPSG:3857' +
        '&bbox={bbox-epsg-3857}' +
        '&width=256' +
        '&height=256'
    ],
    tileSize: 256
});

map.addLayer({
    id: 'wms-layer',
    type: 'raster',
    source: 'wms-source'
});

MapLibre автоматически подставляет значение {bbox-epsg-3857} для каждого тайла.

Использование GeoServer

Наиболее распространённый WMS-сервер — GeoServer.

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

map.addSource('countries', {
    type: 'raster',
    tiles: [
        'http://localhost:8080/geoserver/wms?' +
        'service=WMS' +
        '&version=1.1.1' +
        '&request=GetMap' +
        '&layers=world:countries' +
        '&styles=' +
        '&format=image/png' +
        '&transparent=true' +
        '&srs=EPSG:3857' +
        '&bbox={bbox-epsg-3857}' +
        '&width=256' +
        '&height=256'
    ],
    tileSize: 256
});

map.addLayer({
    id: 'countries-layer',
    type: 'raster',
    source: 'countries'
});

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

Поддержка прозрачности

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

Для этого применяется параметр:

transparent=true

Полный пример:

tiles: [
    'https://server.example.com/wms?' +
    'service=WMS' +
    '&request=GetMap' +
    '&layers=roads' +
    '&format=image/png' +
    '&transparent=true' +
    '&bbox={bbox-epsg-3857}' +
    '&width=256' +
    '&height=256'
]

Формат PNG обеспечивает поддержку альфа-канала.

Настройка прозрачности слоя

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

map.setPaintProperty(
    'wms-layer',
    'raster-opacity',
    0.5
);

Или при создании слоя:

map.addLayer({
    id: 'wms-layer',
    type: 'raster',
    source: 'wms-source',
    paint: {
        'raster-opacity': 0.6
    }
});

Управление яркостью и контрастностью

Для растровых слоёв доступны дополнительные настройки.

Яркость:

paint: {
    'raster-brightness-min': 0.2,
    'raster-brightness-max': 0.9
}

Контрастность:

paint: {
    'raster-contrast': 0.5
}

Насыщенность:

paint: {
    'raster-saturation': 0.7
}

Эти параметры особенно полезны при работе с ортофотопланами и спутниковыми снимками через WMS.

Использование нескольких WMS-слоёв

На одной карте может отображаться несколько сервисов одновременно.

map.addLayer({
    id: 'roads',
    type: 'raster',
    source: 'roads-source'
});

map.addLayer({
    id: 'buildings',
    type: 'raster',
    source: 'buildings-source'
});

map.addLayer({
    id: 'parcels',
    type: 'raster',
    source: 'parcels-source'
});

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

Управление видимостью

Скрытие слоя:

map.setLayoutProperty(
    'wms-layer',
    'visibility',
    'none'
);

Показ слоя:

map.setLayoutProperty(
    'wms-layer',
    'visibility',
    'visible'
);

Переключение:

const visible =
    map.getLayoutProperty(
        'wms-layer',
        'visibility'
    );

map.setLayoutProperty(
    'wms-layer',
    'visibility',
    visible === 'visible'
        ? 'none'
        : 'visible'
);

Работа с различными версиями WMS

Наиболее распространены версии:

WMS 1.1.1
WMS 1.3.0

Пример для версии 1.1.1:

version=1.1.1
&srs=EPSG:3857

Для версии 1.3.0:

version=1.3.0
&crs=EPSG:3857

Ключевое отличие заключается в использовании параметров:

Версия	Параметр
1.1.1	srs
1.3.0	crs

Некоторые серверы требуют строго определённую версию.

Выбор формата изображений

WMS поддерживает различные форматы.

PNG:

format=image/png

JPEG:

format=image/jpeg

GIF:

format=image/gif

Сравнение:

Формат	Прозрачность	Размер
PNG	Да	Средний
JPEG	Нет	Малый
GIF	Да	Малый

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

Использование тайлов высокого разрешения

Стандартный размер тайла:

tileSize: 256

Для экранов высокой плотности:

tileSize: 512

Соответственно изменяются параметры запроса:

width=512
height=512

Это повышает детализацию изображения.

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

Слой можно отображать только на определённых масштабах.

map.addLayer({
    id: 'wms-layer',
    type: 'raster',
    source: 'wms-source',
    minzoom: 5,
    maxzoom: 15
});

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

Получение информации об объектах через GetFeatureInfo

Для реализации идентификации объектов обычно используется обработчик клика.

map.on('click', async (e) => {

    const point = e.point;

    const url =
        buildGetFeatureInfoUrl(point);

    const response =
        await fetch(url);

    const data =
        await response.json();

    console.log(data);
});

Функция формирования URL должна учитывать:

текущий масштаб;
границы карты;
координаты клика;
размеры контейнера карты.

Кэширование WMS

Каждый запрос WMS потенциально генерирует новое изображение.

Для повышения производительности применяются:

серверный кэш;
GeoWebCache;
MapProxy;
CDN-кэширование.

Схема работы:

MapLibre
      ↓
  Кэш-сервер
      ↓
     WMS

При наличии кэша большинство запросов обслуживается значительно быстрее.

Ограничения WMS в MapLibre

При использовании WMS необходимо учитывать ряд особенностей.

Отсутствует доступ к объектам слоя:

map.queryRenderedFeatures();

не сможет получить объекты WMS, поскольку клиент получает только изображение.

Также невозможно:

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

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

GeoJSON;
Vector Tiles;
PMTiles;
MVT.

Сравнение WMS и векторных тайлов

Характеристика	WMS	Vector Tiles
Формат передачи	Изображение	Геометрия
Клиентская стилизация	Нет	Да
Производительность	Ниже	Выше
Объём трафика	Больше	Меньше
Интерактивность	Ограничена	Высокая
Поддержка старых ГИС	Отличная	Ограниченная
Серверная визуализация	Да	Нет

WMS остаётся важным стандартом в инфраструктуре ГИС благодаря совместимости с многочисленными геопорталами, государственными кадастровыми системами, картографическими серверами и корпоративными геоинформационными платформами. В экосистеме MapLibre GL JS такие сервисы обычно используются для подключения готовых картографических слоёв, ортофотопланов, спутниковых снимков, тематических карт и архивных геоданных, публикуемых через GeoServer, MapServer, ArcGIS Server и другие WMS-совместимые решения.