Tilesets

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

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

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

Это обеспечивает:

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

Типы тайлсетов в Mapbox GL JS

Vector tiles (векторные тайлы)

Векторные тайлы являются основным форматом в Mapbox GL JS. Они содержат геометрические данные (точки, линии, полигоны) и метаданные, но не пиксельное изображение.

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

  • данные хранятся в сжатом бинарном формате (Mapbox Vector Tile — MVT)
  • стилизация происходит на клиенте
  • поддерживается динамическое изменение внешнего вида без перезагрузки данных
  • высокая производительность при масштабировании

Векторные тайлы подключаются через источник типа vector.

map.addSource('cities', {
  type: 'vector',
  url: 'mapbox://mapbox.urban-areas'
});

Raster tiles (растровые тайлы)

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

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

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

Пример подключения:

map.addSource('satellite', {
  type: 'raster',
  url: 'mapbox://mapbox.satellite',
  tileSize: 256
});

Raster-dem tiles

Отдельный тип тайлсетов используется для цифровых моделей рельефа.

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

  • хранение высотных данных
  • использование для 3D-террейна
  • применяется вместе с terrain слоем
map.addSource('terrain-data', {
  type: 'raster-dem',
  url: 'mapbox://mapbox.terrain-rgb',
  tileSize: 256
});

Структура TileJSON

Mapbox GL JS использует формат TileJSON для описания тайлсетов. Он содержит метаданные и шаблоны URL для загрузки тайлов.

Основные поля:

  • tiles — массив URL-шаблонов
  • minzoom и maxzoom — диапазон масштабов
  • bounds — географические границы
  • scheme — схема координат (xyz или tms)

Пример:

{
  "tilejson": "2.2.0",
  "tiles": [
    "https://example.com/tiles/{z}/{x}/{y}.pbf"
  ],
  "minzoom": 0,
  "maxzoom": 14
}

Подключение тайлсетов в Mapbox GL JS

Тайлсеты не используются напрямую для рендеринга. Они всегда подключаются через источники (sources), которые затем связываются со слоями (layers).

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

map.on('load', () => {
  map.addSource('roads', {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-streets-v8'
  });
});

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

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

Здесь важным элементом является source-layer, который указывает конкретный слой внутри векторного тайлсета.

Source layers и их роль

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

  • road
  • building
  • water
  • landuse

Каждый из них можно использовать независимо.

map.addLayer({
  id: 'water-fill',
  type: 'fill',
  source: 'composite',
  'source-layer': 'water',
  paint: {
    'fill-color': '#00bfff'
  }
});

Масштабирование и уровни детализации

Тайлсеты разбиваются по zoom levels. Это означает, что на каждом уровне масштабирования сервер отдаёт разные по детализации данные.

  • z0–z5: крупные географические объекты (континенты, страны)
  • z6–z10: города и регионы
  • z11–z14: улицы и кварталы
  • z15–z22: здания и детальная геометрия

Mapbox GL JS автоматически выбирает нужные тайлы в зависимости от текущего масштаба.

URL-шаблоны тайлов

Тайлы загружаются по шаблону:

/{z}/{x}/{y}.pbf

где:

  • z — уровень зума
  • x — координата тайла по горизонтали
  • y — координата тайла по вертикали

Mapbox GL JS рассчитывает эти значения на основе текущего положения камеры.

Фильтрация данных внутри тайлсетов

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

map.setFilter('road-lines', ['==', 'type', 'primary']);

Фильтрация работает мгновенно, так как данные уже загружены в браузер.

Динамическая стилизация тайлсетов

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

Пример изменения цвета дорог:

map.setPaintProperty('road-lines', 'line-color', '#0000ff');

Это не требует повторной загрузки тайлов, так как геометрия уже присутствует в памяти.

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

Mapbox GL JS активно использует кэширование:

  • браузерный HTTP cache
  • внутренний кэш WebGL слоя
  • повторное использование уже загруженных тайлов при панорамировании

Это существенно снижает количество запросов при навигации по карте.

Производительность и оптимизация тайлсетов

Эффективность работы тайлсетов зависит от нескольких факторов:

Размер геометрии

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

Количество объектов

Большое количество мелких объектов может перегрузить GPU.

Уровень генерализации

На низких zoom levels данные должны быть упрощены.

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

Иконки и символы выносятся в sprite sheets, что снижает количество запросов.

Кастомные тайлсеты

Mapbox GL JS поддерживает подключение собственных тайлсетов, размещённых на любом сервере.

Пример:

map.addSource('custom-data', {
  type: 'vector',
  tiles: [
    'https://myserver.com/tiles/custom/{z}/{x}/{y}.pbf'
  ],
  minzoom: 0,
  maxzoom: 12
});

Это позволяет использовать собственные пайплайны генерации данных (например, Tippecanoe или tile-servers на базе PostGIS).

Связь тайлсетов и стилей Mapbox

Стиль Mapbox GL JS (Style Specification) тесно связан с тайлсетами. Каждый слой стиля указывает:

  • источник данных (source)
  • тип геометрии
  • слой внутри тайлсета (source-layer)
  • правила визуализации

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

Ограничения тайлсетов

Несмотря на гибкость, существуют ограничения:

  • размер тайла ограничен (обычно 512KB–1MB для MVT)
  • сложные запросы нельзя выполнять на клиенте
  • нет SQL-подобной агрегации в реальном времени
  • зависимость от предварительной генерации данных

Эти ограничения компенсируются масштабируемостью и скоростью рендеринга.

Поток загрузки тайлсета в Mapbox GL JS

Процесс загрузки включает несколько этапов:

  1. Определение текущего viewport
  2. Вычисление необходимых z/x/y тайлов
  3. Запрос тайлов по сети
  4. Декодирование MVT (для векторных данных)
  5. Передача данных в WebGL буферы
  6. Отрисовка через слой стиля

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

Оглавление