Выбор источника тайлов

В MapLibre GL JS основой визуализации карты выступают тайлы — небольшие фрагменты геоданных или изображений, которые загружаются по мере необходимости в зависимости от положения камеры и масштаба. Выбор источника тайлов напрямую определяет производительность, качество отображения и гибкость стилизации карты.

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

Основные типы источников

Векторные тайлы (vector)

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

Ключевые особенности:

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

Типичный источник в стиле MapLibre:

map.addSource('streets', {
  type: 'vector',
  tiles: [
    'https://example.com/tiles/{z}/{x}/{y}.pbf'
  ],
  minzoom: 0,
  maxzoom: 14
});

Формат .pbf (Protocolbuffer Binary Format) обеспечивает компактность и высокую скорость загрузки. Векторные источники часто используются с данными OpenStreetMap и генерацией через TileServer или OpenMapTiles.

Растровые тайлы (raster)

Растровые тайлы представляют собой готовые изображения, разделённые на сетку.

Особенности:

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

Пример:

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

Растровые источники применяются для спутниковых снимков, ортофотопланов и исторических карт.

Дем-данные (raster-dem)

Источники цифровых моделей рельефа используются для построения 3D-эффектов и анализа высот.

Особенности:

  • хранение высот в закодированном виде (обычно RGB encoding);
  • поддержка terrain и hillshade;
  • высокая роль в 3D-визуализации.

Пример:

map.addSource('terrain', {
  type: 'raster-dem',
  tiles: [
    'https://example.com/dem/{z}/{x}/{y}.png'
  ],
  encoding: 'mapbox'
});

GeoJSON

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

Особенности:

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

Пример:

map.addSource('points', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [66.9237, 48.0196]
        }
      }
    ]
  }
});

GeoJSON подходит для отображения объектов реального времени, пользовательских маркеров и аналитических слоёв.

Структура Tile URL и схема координат

Большинство тайловых источников используют шаблон:

/{z}/{x}/{y}

где:

  • z — уровень масштаба;
  • x — координата по горизонтали;
  • y — координата по вертикали.

Поддерживаются схемы:

  • XYZ — стандартная схема (используется по умолчанию);
  • TMS — инвертированная ось Y.

TileJSON как способ описания источника

TileJSON используется для централизованного описания тайлового набора:

map.addSource('tileset', {
  type: 'vector',
  url: 'https://example.com/tiles.json'
});

Файл TileJSON может содержать:

  • список шаблонов URL;
  • диапазоны zoom;
  • bounding box;
  • атрибуцию;
  • метаданные.

Выбор между векторными и растровыми источниками

Производительность

Векторные тайлы:

  • меньший объём данных при передаче;
  • более высокая нагрузка на GPU;
  • лучше масштабируются.

Растровые тайлы:

  • быстрая отрисовка;
  • больший сетевой трафик;
  • фиксированное качество.

Гибкость стилизации

Векторные источники позволяют:

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

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

Объём данных

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

Масштабирование и уровни zoom

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

  • minzoom — минимальный доступный уровень;
  • maxzoom — максимальный уровень детализации.

Неправильная настройка приводит к:

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

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

Тайлы эффективно кешируются на нескольких уровнях:

  • браузерный кэш;
  • CDN;
  • серверный кэш генерации.

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

Лицензирование источников

Источники тайлов часто связаны с правовыми ограничениями.

Типичные варианты:

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

Игнорирование атрибуции может привести к блокировке сервиса или нарушению условий использования.

Самостоятельное хостинг-решение

При self-hosting используются:

  • TileServer GL;
  • OpenMapTiles stack;
  • кастомные генераторы на основе PostGIS и Tegola.

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

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

Недостатки:

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

Атрибуция источников

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

attribution: '© OpenStreetMap contributors'

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

Комбинирование нескольких источников

Один стиль может содержать несколько источников одновременно:

  • базовый слой (vector);
  • спутниковый фон (raster);
  • рельеф (raster-dem);
  • динамические объекты (geojson).

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

Оглавление