Базовые тайловые слои

Тайловый слой (Tile Layer) — основной источник картографических данных в Leaflet. Именно он отвечает за отображение подложки карты: дорог, зданий, водоёмов, рельефа, спутниковых снимков и других объектов.

Вместо загрузки одной большой карты браузер получает множество небольших изображений одинакового размера — тайлов. Обычно размер тайла составляет 256×256 пикселей, хотя современные сервисы могут использовать и другие размеры.

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

Принцип работы тайлов

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

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

Когда карта отображается на экране, Leaflet вычисляет, какие тайлы необходимы для текущего положения и масштаба, после чего отправляет запросы на сервер.

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

https://tile-server.com/{z}/{x}/{y}.png

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

https://tile-server.com/10/523/342.png

где:

  • 10 — масштаб;
  • 523 — координата X;
  • 342 — координата Y.

Создание тайлового слоя

Для подключения тайлов используется метод L.tileLayer().

Базовый пример:

const map = L.map('map').setView([55.751244, 37.618423], 10);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png')
    .addTo(map);

В данном случае:

  1. Создаётся объект карты.
  2. Подключается тайловый слой OpenStreetMap.
  3. Слой добавляется на карту через addTo().

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

Структура URL тайлов

В URL используются специальные плейсхолдеры.

Координаты тайла

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

Здесь:

Переменная Назначение
{z} уровень масштаба
{x} координата по горизонтали
{y} координата по вертикали

Поддомены

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

Пример:

'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'

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

a.tile.openstreetmap.org
b.tile.openstreetmap.org
c.tile.openstreetmap.org

Это позволяет браузеру выполнять больше параллельных запросов.

Настройка атрибуции

Практически все картографические сервисы требуют отображения информации об авторских правах.

Атрибуция задаётся через параметр attribution.

L.tileLayer(
    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
        attribution: '© OpenStreetMap contributors'
    }
).addTo(map);

Текст автоматически отображается в правом нижнем углу карты.

Отсутствие обязательной атрибуции может нарушать лицензионные требования поставщика карт.

Основные параметры тайлового слоя

minZoom

Минимально допустимый масштаб.

L.tileLayer(url, {
    minZoom: 5
});

Если пользователь попытается уменьшить карту сильнее, ограничение не позволит выйти за указанный уровень.

maxZoom

Максимально допустимый масштаб.

L.tileLayer(url, {
    maxZoom: 18
});

tileSize

Размер одного тайла.

Стандарт:

L.tileLayer(url, {
    tileSize: 256
});

Увеличенный размер:

L.tileLayer(url, {
    tileSize: 512
});

opacity

Прозрачность слоя.

L.tileLayer(url, {
    opacity: 0.5
});

Значения:

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

zIndex

Порядок наложения слоёв.

L.tileLayer(url, {
    zIndex: 100
});

Чем больше значение, тем выше слой располагается относительно других.

className

Добавление CSS-класса.

L.tileLayer(url, {
    className: 'custom-layer'
});

После этого внешний вид слоя можно настраивать через CSS.

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

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

const osm = L.tileLayer(
    'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
);

const satellite = L.tileLayer(
    'https://server.com/satellite/{z}/{x}/{y}.jpg'
);

Переключение осуществляется через контрол слоёв.

L.control.layers({
    'Схема': osm,
    'Спутник': satellite
}).addTo(map);

Теперь пользователь сможет выбирать тип отображения карты.

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

Слой можно подключить позднее.

const layer = L.tileLayer(url);

layer.addTo(map);

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

Удаление слоя

Любой тайловый слой может быть удалён.

map.removeLayer(layer);

Или:

layer.remove();

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

Изменение прозрачности во время работы

Метод setOpacity() позволяет менять прозрачность без пересоздания слоя.

layer.setOpacity(0.3);

Например:

document
    .getElementById('slider')
    .addEventListener('input', event => {
        layer.setOpacity(event.target.value);
    });

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

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

Поднять слой выше:

layer.bringToFront();

Опустить ниже:

layer.bringToBack();

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

Retina-дисплеи

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

Для более чёткого отображения можно включить поддержку Retina:

L.tileLayer(url, {
    detectRetina: true
});

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

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

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

Недостаток — увеличение объёма загружаемых данных.

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

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

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

Для отключения:

L.tileLayer(url, {
    noWrap: true
});

Теперь отображается только одна копия карты.

Ограничение области карты

Тайловый слой может иметь собственные географические границы.

L.tileLayer(url, {
    bounds: [
        [40, -20],
        [70, 60]
    ]
});

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

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

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

Иногда сервер возвращает ошибку или изображение отсутствует.

Leaflet генерирует событие tileerror.

layer.on('tileerror', function(event) {
    console.log('Ошибка загрузки тайла');
});

Объект события содержит:

event.tile
event.coords

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

События тайлового слоя

loading

Начало загрузки тайлов.

layer.on('loading', () => {
    console.log('Загрузка началась');
});

load

Загрузка завершена.

layer.on('load', () => {
    console.log('Карта загружена');
});

tileloadstart

Начало загрузки отдельного тайла.

layer.on('tileloadstart', e => {
    console.log(e.coords);
});

tileload

Успешная загрузка тайла.

layer.on('tileload', e => {
    console.log('Тайл получен');
});

tileerror

Ошибка загрузки.

layer.on('tileerror', e => {
    console.log('Ошибка');
});

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

Замена источника тайлов

Источник данных можно менять без создания нового объекта.

layer.setUrl(
    'https://new-server.com/{z}/{x}/{y}.png'
);

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

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

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

Leaflet не реализует собственную систему кэширования изображений.

Основная работа выполняется браузером:

  1. Тайл загружается впервые.
  2. Браузер сохраняет его в кэш.
  3. При повторном обращении используется локальная копия.

Эффективность кэширования зависит от HTTP-заголовков сервера:

Cache-Control
ETag
Expires
Last-Modified

Грамотная настройка кэша значительно уменьшает сетевой трафик.

Производительность тайловых слоёв

На скорость работы карты влияют несколько факторов:

Размер тайлов

Крупные тайлы уменьшают количество запросов, но увеличивают размер каждого файла.

Количество одновременно отображаемых слоёв

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

Скорость сервера

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

Retina-режим

Увеличивает объём загружаемых данных почти в два раза.

Масштаб карты

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

Типичная конфигурация базового тайлового слоя

const map = L.map('map').setView(
    [55.751244, 37.618423],
    12
);

const baseLayer = L.tileLayer(
    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
        attribution:
            '© OpenStreetMap contributors',
        minZoom: 3,
        maxZoom: 19,
        detectRetina: true,
        opacity: 1
    }
);

baseLayer.addTo(map);

Данная конфигурация включает наиболее часто используемые настройки: атрибуцию, ограничения масштаба, поддержку дисплеев высокой плотности пикселей и стандартную непрозрачность слоя. Базовые тайловые слои образуют фундамент практически любого приложения на Leaflet, обеспечивая визуальную основу для отображения маркеров, векторных объектов, геоданных и пользовательских интерфейсов поверх карты.

Оглавление