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

Тайловый слой (tile layer) — это слой карты, данные которого разбиты на множество небольших фрагментов — тайлов. Вместо загрузки всей карты целиком клиент получает только те тайлы, которые необходимы для отображения текущей области просмотра и уровня масштабирования.

Такой подход обеспечивает:

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

В MapLibre GL JS тайлы могут содержать:

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

---

Архитектура тайлов

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

На каждом уровне масштабирования карта делится на квадратные фрагменты размером 256×256 или 512×512 пикселей.

Например:

Zoom	Количество тайлов
0	1
1	4
2	16
3	64
10	более миллиона

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

z/x/y

где:

• z — уровень масштабирования;
• x — колонка тайла;
• y — строка тайла.

Пример URL тайла:

https://tile-server.com/tiles/5/12/8.png

Здесь:

z = 5
x = 12
y = 8

MapLibre автоматически вычисляет необходимые координаты и запрашивает соответствующие файлы.

---

Источник данных (Source) и слой (Layer)

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

Источник описывает, откуда получать данные:

map.addSource('osm', {
    type: 'raster',
    tiles: [
        'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
    ],
    tileSize: 256
});

Слой определяет способ отображения этих данных:

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

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

---

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

Наиболее распространенный вариант — использование PNG или JPEG тайлов.

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

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

После загрузки карты добавляется источник:

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

    map.addSource('raster-source', {
        type: 'raster',
        tiles: [
            'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
        ],
        tileSize: 256
    });

});

Затем подключается слой:

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

В результате карта будет отображать тайлы OpenStreetMap.

---

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

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

Пример:

map.addSource('osm', {
    type: 'raster',
    tiles: [
        'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
        'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
        'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
    ],
    tileSize: 256
});

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

Преимущества:

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

---

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

Параметр tileSize определяет размер тайла в пикселях.

Наиболее распространенные значения:

tileSize: 256

или

tileSize: 512

Пример:

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

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

Неверное значение может приводить к:

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

---

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

Не все тайловые серверы поддерживают полный диапазон масштабов.

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

minzoom
maxzoom

Пример:

map.addSource('topography', {
    type: 'raster',
    tiles: [
        'https://server.com/topo/{z}/{x}/{y}.png'
    ],
    tileSize: 256,
    minzoom: 5,
    maxzoom: 14
});

Поведение:

• при масштабе меньше minzoom тайлы не загружаются;
• при масштабе больше maxzoom используются максимально доступные данные.

---

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

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

Чаще всего используется формат MVT (Mapbox Vector Tile).

Источник:

map.addSource('vector-source', {
    type: 'vector',
    tiles: [
        'https://server.com/tiles/{z}/{x}/{y}.pbf'
    ]
});

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

Например:

map.addLayer({
    id: 'roads',
    type: 'line',
    source: 'vector-source',
    'source-layer': 'transportation',
    paint: {
        'line-color': '#ff0000',
        'line-width': 2
    }
});

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

---

Параметр source-layer

Для векторных тайлов обязательно используется свойство:

source-layer

Оно указывает внутренний слой данных внутри MVT-файла.

Пример:

map.addLayer({
    id: 'buildings',
    type: 'fill',
    source: 'city-data',
    'source-layer': 'building',
    paint: {
        'fill-color': '#cccccc'
    }
});

Один MVT-тайл может содержать:

roads
buildings
water
landuse
railway
boundaries

Каждый из них подключается отдельным слоем MapLibre.

---

Подключение спутниковых снимков

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

Пример:

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

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

JPEG обеспечивает меньший размер файлов по сравнению с PNG и хорошо подходит для фотоснимков.

---

Управление прозрачностью тайлового слоя

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

Пример:

map.addLayer({
    id: 'imagery',
    type: 'raster',
    source: 'satellite',
    paint: {
        'raster-opacity': 0.7
    }
});

Значения:

0   — полностью прозрачен
1   — полностью непрозрачен

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

---

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

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

Яркость:

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

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

paint: {
    'raster-contrast': 0.5
}

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

paint: {
    'raster-saturation': 0.4
}

Резкость:

paint: {
    'raster-resampling': 'linear'
}

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

---

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

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

Например:

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

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

Дороги будут нарисованы поверх спутниковых снимков.

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

map.addLayer(
    newLayer,
    'roads'
);

Новый слой появится непосредственно перед слоем roads.

---

Обновление URL тайлов

Иногда требуется заменить источник данных без пересоздания карты.

Источник можно удалить:

map.removeLayer('raster-layer');
map.removeSource('raster-source');

После чего создается новый источник:

map.addSource('raster-source', {
    type: 'raster',
    tiles: [
        'https://new-server.com/{z}/{x}/{y}.png'
    ],
    tileSize: 256
});

И повторно добавляется слой:

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

---

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

MapLibre генерирует события при возникновении проблем.

Пример:

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

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

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

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

---

Использование шаблонов URL

В URL тайлов обычно используются специальные переменные:

{z}
{x}
{y}

Пример:

'https://tiles.server.com/{z}/{x}/{y}.png'

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

Запрос может выглядеть так:

https://tiles.server.com/12/2478/1324.png

---

Работа с TMS-тайлами

Некоторые серверы используют схему TMS вместо XYZ.

Главное отличие заключается в направлении координаты Y.

Стандарт XYZ:

(0,0)
↓
Y увеличивается вниз

Стандарт TMS:

(0,0)
↑
Y увеличивается вверх

Для поддержки TMS используется параметр:

scheme: 'tms'

Пример:

map.addSource('tms-source', {
    type: 'raster',
    tiles: [
        'https://server.com/tms/{z}/{x}/{y}.png'
    ],
    scheme: 'tms',
    tileSize: 256
});

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

---

Кэширование тайлов

Браузеры активно используют HTTP-кэширование.

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

Часто используются заголовки:

Cache-Control
ETag
Expires
Last-Modified

Преимущества:

• снижение сетевого трафика;
• ускорение загрузки;
• уменьшение нагрузки на сервер.

Для высоконагруженных картографических систем правильное кэширование является одним из ключевых факторов производительности.

---

Практическая схема подключения тайлового слоя

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

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

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

    map.addSource('osm', {
        type: 'raster',
        tiles: [
            'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
        ],
        tileSize: 256,
        minzoom: 0,
        maxzoom: 19
    });

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

});

Данная последовательность отражает базовый алгоритм работы с тайловыми слоями в MapLibre GL JS:

1. Создание карты.
2. Добавление источника тайлов.
3. Настройка параметров источника.
4. Создание слоя.
5. Связывание слоя с источником.
6. Настройка визуальных свойств.
7. Отображение данных на карте.