WMTS сервисы

WMTS (Web Map Tile Service) — стандарт OGC для публикации картографических данных в виде заранее подготовленных тайлов. В отличие от WMS, где сервер формирует изображение по запросу, WMTS предоставляет уже сгенерированные плитки фиксированного размера и масштаба. Такой подход значительно снижает нагрузку на сервер и ускоряет отображение карты.

WMTS широко применяется для публикации:

топографических карт;
спутниковых снимков;
кадастровых данных;
геологических карт;
тематических слоев государственных геопорталов.

В экосистеме MapLibre GL JS работа с WMTS обычно осуществляется через подключение тайловых источников (raster) или, реже, через векторные тайлы (vector), если WMTS-сервис предоставляет данные в таком формате.

Архитектура WMTS

WMTS основан на концепции матрицы тайлов.

Каждый уровень масштабирования содержит сетку плиток:

+-----+-----+-----+
| 0/0 | 1/0 | 2/0 |
+-----+-----+-----+
| 0/1 | 1/1 | 2/1 |
+-----+-----+-----+
| 0/2 | 1/2 | 2/2 |
+-----+-----+-----+

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

TileMatrix — уровень масштаба;
TileRow — строка;
TileCol — столбец.

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

https://server.example.com/wmts?
SERVICE=WMTS&
REQUEST=GetTile&
VERSION=1.0.0&
LAYER=basemap&
STYLE=default&
TILEMATRIXSET=WebMercatorQuad&
TILEMATRIX=10&
TILEROW=345&
TILECOL=512&
FORMAT=image/png

MapLibre GL JS автоматически подставляет значения масштаба, строки и столбца через шаблон URL.

Форматы запросов WMTS

Стандарт определяет два основных способа получения тайлов.

KVP (Key Value Pair)

Все параметры передаются через строку запроса:

https://example.com/wmts?
SERVICE=WMTS&
REQUEST=GetTile&
VERSION=1.0.0&
LAYER=world&
STYLE=default&
TILEMATRIXSET=GoogleMapsCompatible&
TILEMATRIX={z}&
TILEROW={y}&
TILECOL={x}&
FORMAT=image/png

Это наиболее распространённый вариант подключения в MapLibre.

RESTful WMTS

Параметры встраиваются непосредственно в путь URL:

https://example.com/wmts/world/default/
GoogleMapsCompatible/{z}/{y}/{x}.png

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

Структура WMTS Capabilities

Каждый сервис WMTS предоставляет XML-документ возможностей:

https://example.com/wmts?SERVICE=WMTS&REQUEST=GetCapabilities

Документ содержит описание:

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

Фрагмент документа:

<Layer>
    <ows:Identifier>basemap</ows:Identifier>

    <Style isDefault="true">
        <ows:Identifier>default</ows:Identifier>
    </Style>

    <Format>image/png</Format>

    <TileMatrixSetLink>
        <TileMatrixSet>GoogleMapsCompatible</TileMatrixSet>
    </TileMatrixSetLink>
</Layer>

Перед подключением WMTS в MapLibre обычно анализируется именно этот документ.

Подключение WMTS как растрового источника

Наиболее распространённый сценарий — использование растровых тайлов.

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

const map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {},
        layers: []
    },
    center: [37.62, 55.75],
    zoom: 6
});

Добавление WMTS-источника:

map.on('load', () => {

    map.addSource('wmts-source', {
        type: 'raster',
        tiles: [
            'https://server.example.com/wmts?' +
            'SERVICE=WMTS&' +
            'REQUEST=GetTile&' +
            'VERSION=1.0.0&' +
            'LAYER=basemap&' +
            'STYLE=default&' +
            'TILEMATRIXSET=GoogleMapsCompatible&' +
            'TILEMATRIX={z}&' +
            'TILEROW={y}&' +
            'TILECOL={x}&' +
            'FORMAT=image/png'
        ],
        tileSize: 256
    });

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

});

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

Использование нескольких серверов тайлов

Для балансировки нагрузки некоторые WMTS-сервисы используют несколько поддоменов.

Пример:

map.addSource('wmts', {
    type: 'raster',
    tiles: [
        'https://a.example.com/wmts/{z}/{y}/{x}.png',
        'https://b.example.com/wmts/{z}/{y}/{x}.png',
        'https://c.example.com/wmts/{z}/{y}/{x}.png'
    ],
    tileSize: 256
});

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

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

Большинство WMTS использует плитки 256×256 пикселей.

Настройка:

tileSize: 256

Некоторые сервисы предоставляют тайлы размером 512×512:

tileSize: 512

Неверно указанный размер приводит к:

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

Информация о размере тайла обычно содержится в документе Capabilities.

Использование непрозрачности слоя

Растровый слой можно сделать полупрозрачным.

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

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

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

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

Повышение контраста:

paint: {
    'raster-contrast': 0.4
}

Изменение яркости:

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

Повышение насыщенности:

paint: {
    'raster-saturation': 0.5
}

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

Работа с несколькими WMTS-слоями

Одна карта может содержать несколько независимых сервисов.

Пример:

map.addSource('satellite', {
    type: 'raster',
    tiles: [
        'https://server1.com/wmts/{z}/{y}/{x}.jpg'
    ],
    tileSize: 256
});

map.addSource('cadastral', {
    type: 'raster',
    tiles: [
        'https://server2.com/wmts/{z}/{y}/{x}.png'
    ],
    tileSize: 256
});

Создание слоев:

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

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

Переключение WMTS-слоев

Управление видимостью выполняется через свойство visibility.

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

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

Отображение:

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

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

Ограничение диапазона масштабов

Некоторые WMTS поддерживают только определённые уровни масштабирования.

Для ограничения отображения:

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

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

Использование нестандартных систем координат

Наиболее распространённая матрица тайлов WMTS:

GoogleMapsCompatible

Она соответствует проекции Web Mercator (EPSG:3857), используемой MapLibre GL JS.

Однако государственные геопорталы часто публикуют данные в системах:

EPSG:4326;
EPSG:3395;
национальных проекциях.

MapLibre GL JS ориентирован на Web Mercator, поэтому прямое подключение WMTS возможно только при наличии совместимой матрицы тайлов.

Если сервис предоставляет исключительно локальную проекцию, обычно требуется:

промежуточный тайловый сервер;
перепроецирование данных;
публикация совместимого WMTS/TMS.

WMTS и TMS

Часто возникает путаница между WMTS и TMS.

TMS

Запрос:

https://example.com/{z}/{x}/{y}.png

WMTS

Запрос:

SERVICE=WMTS
REQUEST=GetTile
TILEMATRIX={z}
TILEROW={y}
TILECOL={x}

Фактически оба подхода используют тайлы, однако WMTS дополнительно стандартизирует:

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

Для MapLibre различие часто сводится только к формату URL.

Использование WMTS поверх собственного стиля

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

const style = {
    version: 8,
    sources: {
        wmts: {
            type: 'raster',
            tiles: [
                'https://server.example.com/wmts/' +
                '{z}/{y}/{x}.png'
            ],
            tileSize: 256
        }
    },
    layers: [
        {
            id: 'base',
            type: 'raster',
            source: 'wmts'
        }
    ]
};

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

const map = new maplibregl.Map({
    container: 'map',
    style
});

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

Обработка ошибок загрузки тайлов

Для диагностики полезно отслеживать ошибки.

map.on('error', (event) => {
    console.error(event.error);
});

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

Наиболее частые причины ошибок:

неверный URL;
неправильное имя слоя;
отсутствие доступа к сервису;
ошибки CORS;
неверная матрица тайлов;
неподдерживаемая проекция.

Кеширование WMTS

Одно из главных преимуществ WMTS — возможность эффективного кеширования.

Кеширование происходит на нескольких уровнях:

браузер;
CDN;
обратный прокси;
тайловый сервер.

Повторный запрос уже загруженной плитки обычно не требует её повторной генерации.

Благодаря этому WMTS способен обслуживать большое количество пользователей одновременно.

Производительность WMTS в MapLibre GL JS

При работе с крупными картографическими сервисами рекомендуется:

использовать тайлы 256×256 или 512×512;
ограничивать диапазоны масштабирования;
скрывать ненужные слои;
применять CDN;
использовать HTTPS;
избегать одновременной загрузки большого числа растровых слоев;
включать серверное кеширование.

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

FORMAT=image/jpeg

Для карт с прозрачностью обычно применяется PNG:

FORMAT=image/png

WMTS с аутентификацией

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

Пример:

map.addSource('secured-wmts', {
    type: 'raster',
    tiles: [
        'https://example.com/wmts?' +
        'token=YOUR_TOKEN&' +
        'SERVICE=WMTS&' +
        'REQUEST=GetTile&' +
        'TILEMATRIX={z}&' +
        'TILEROW={y}&' +
        'TILECOL={x}'
    ],
    tileSize: 256
});

Иногда используются:

API-ключи;
JWT-токены;
OAuth-аутентификация;
проксирующие серверы.

При работе с защищёнными сервисами важно учитывать сроки действия токенов и механизмы их обновления.

WMTS как базовая картографическая подложка

Наиболее распространённый сценарий использования — подключение WMTS в качестве базового слоя карты.

Типичная схема:

WMTS Спутник
        ↓
WMTS Рельеф
        ↓
Векторные данные MapLibre
        ↓
Маркеры
        ↓
Всплывающие окна

Такое сочетание позволяет использовать преимущества обоих подходов:

быстрые растровые подложки WMTS;
интерактивные векторные объекты MapLibre GL JS;
гибкое управление стилями и слоями;
высокую производительность даже при больших объёмах геоданных.