Растровые WMS/WMTS-источники

MapGL JS API позволяет отображать данные от внешних растровых источников, поэтому пользователь может добавлять на карту слои различных географических объектов, хилшейда, спутниковых снимков и других данных. Для этого нужно подключить RasterTileSource и добавить слой в стиль карты для этого источника. RasterTileSource позволяет запрашивать тайлы как по bounding box (Web Map Service — WMS), так и по их координатам в матрице тайлов (Web Map Tile Service — WMTS).

WMS

WMS — стандарт, разработанный OGC (Open Geospatial Consortium), позволяющий динамически получать географические данные в виде изображения (в форматах PNG, JPEG, GIF и др.) с привязкой к местности. Построение изображения производится на основе его параметров, переданных в пользовательском запросе: географических координат (bounding box), формата и размеров. WMS позволяет получать изображение данных по слоям, а также сделать фон итогового изображения прозрачным. Это дает возможность, например, накладывать друг на друга слои, полученные с разных серверов. Для кастомизации можно указать в запросе стили для слоев данных.

Чтобы подключить источник данных WMS, используйте пример кода ниже:

const source = new mapgl.RasterTileSource(map, {
    url: (_x, _y, _zoom, bbox) => {
        const southWest = bbox.southWest.map((c) => String(c).replace(',', '.')).join(',');
        const northEast = bbox.northEast.map((c) => String(c).replace(',', '.')).join(',');
        return `https://ows.terrestris.de/osm/service?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=OSM-Overlay-WMS&HEIGHT=256&WIDTH=256&SRS=EPSG:3857&STYLES=&BBOX=${southWest},${northEast}`;
    },
    attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    attributes: { bar: 'asd' },
});

Примечания

• Аргумент bbox функции из опции url в RasterTileSourceOptions должен содержать значения координат в проекции EPSG:3857 (Веб-Меркатор, Псевдо-Меркатор).
• Чтобы источник отличался от других, нужно добавить ему уникальное свойство через поле attributes — после этого его можно будет связать с новым слоем стиля карты, а значит и отобразить.
• Помните, что большинство сервисов требуют указывать копирайт. Сделать это можно через поле attribution.

WMTS

WMTS — стандарт, также разработанный OGC. Он разделяет логику работы с WMS, но заточен на производительность и масштабируемость: пользователю возвращаются уже преподготовленные или закешированные изображения размером 256 или 512 пикселей, что не требует манипуляций с ними и с обработкой географических данных.

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

const source = new mapgl.RasterTileSource(map, {
    url: (x, y, zoom) => `https://tile.openstreetmap.org/${zoom}/${x}/${y}.png`,
    attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    attributes: { bar: 'asd' },
});

Примечания

• Чтобы источник отличался от других, нужно добавить ему уникальное свойство через поле attributes — после этого его можно будет связать с новым слоем стиля карты, а значит и отобразить.
• Помните, что большинство сервисов требуют указывать копирайт. Сделать это можно через поле attribution.

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

Стиль карты — это конфиг, который описывает, как отрисовывать данные карты. Стиль состоит из слоев, каждый из которых содержит:

• в поле filter — логику фильтрации данных карты для определения, какие именно данные будет отрисовывать этот слой;
• в поле style — описание внешнего вида объектов отрисовки (цвет, ширина, шрифт и пр.).

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

Сначала создайте новый слой:

const layer = {
    id: 'raster-tile-layer', // ID каждого слоя должен быть уникальным

    // Логика фильтрации или выбора данных для этого слоя
    filter: [
        'match',
        ['sourceAttr', 'bar'],
        ['asd'],
        true, // Значение при совпадении атрибута "bar" источника cо значением "asd"
        false, // Значение при несовпадении
    ],

    // Тип объекта отрисовки
    type: 'raster',

    // Стиль объекта отрисовки
    style: {
        opacity: 1,
    },
};

Затем добавьте слой после загрузки стиля:

map.on('styleload', () => {
    map.addLayer(layer);
});

filter использует следующие выражения:

• SourceAttrExpression — для получения значений из свойства bar источника данных;
• MatchExpression — для сопоставления полученного свойства из атрибута bar со строковым значением asd.

Пример работы RasterTileSource со стандартом WMS:

Пример работы RasterTileSource со стандартом WMTS: