Паттерны и текстуры

В MapLibre GL JS паттерны (patterns) и текстуры используются для заполнения геометрии повторяющимися изображениями вместо сплошных цветов. Это ключевой механизм для визуального обогащения картографических слоёв: штриховка территорий, обозначение типов зон, визуальная дифференциация объектов без увеличения палитры цветов.

Паттерны применяются в трёх основных контекстах стиля:

  • fill-pattern — заполнение полигонов
  • line-pattern — текстура линий
  • background-pattern — фон карты

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

Архитектура работы с изображениями в стиле

MapLibre GL JS опирается на стиль-ориентированную модель рендеринга. Все изображения, используемые в паттернах, должны быть предварительно зарегистрированы в стиле через API:

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

Базовый механизм регистрации изображения:

map.on('load', () => {
  map.loadImage('/patterns/diagonal-hatch.png', (error, image) => {
    if (error) throw error;

    if (!map.hasImage('diagonal-hatch')) {
      map.addImage('diagonal-hatch', image);
    }
  });
});

После добавления изображение становится доступным в style-spec как идентификатор ресурса.

Fill-pattern: заполнение полигонов текстурами

Полигональные слои используют свойство fill-pattern. Оно заменяет fill-color или комбинируется с ним для сложных эффектов.

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

map.addLayer({
  id: 'landuse-pattern',
  type: 'fill',
  source: 'landuse',
  paint: {
    'fill-pattern': 'diagonal-hatch'
  }
});

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

Поведение тайлинга и масштабирование

Паттерны в MapLibre GL JS работают в пространстве тайлов. Это означает:

  • изображение повторяется бесшовно
  • масштабирование зависит от zoom
  • ориентация фиксирована в экранных координатах

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

  • pattern-small
  • pattern-medium
  • pattern-large

Далее применяется data-driven styling:

'fill-pattern': [
  'step',
  ['zoom'],
  'pattern-small',
  10,
  'pattern-medium',
  14,
  'pattern-large'
]

Line-pattern: текстурирование линий

Линии поддерживают паттерны через свойство line-pattern. Это используется для:

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

Пример линии с текстурой

map.addLayer({
  id: 'railway-pattern',
  type: 'line',
  source: 'railways',
  paint: {
    'line-pattern': 'rail-dashed-pattern',
    'line-width': 6
  }
});

Особенность line-pattern заключается в том, что изображение растягивается вдоль линии с учётом её длины и сегментации.

Background-pattern: фоновые текстуры карты

Фон карты может быть задан через background-pattern. Это позволяет заменить однотонный фон на:

  • бумажные текстуры
  • сетки
  • топографические подложки
  • декоративные стили
map.setPaintProperty('background', 'background-pattern', 'paper-texture');

Фоновый паттерн применяется до всех слоёв и влияет на визуальную основу карты.

Работа с sprite-атласами

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

Структура sprite:

  • PNG atlas
  • JSON метаданные

MapLibre автоматически загружает:

map.setSprite('/sprites/sprite');

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

  • forest-pattern
  • water-pattern
  • urban-grid

Использование sprite снижает количество HTTP-запросов и ускоряет рендеринг.

Требования к изображениям паттернов

Эффективные паттерны подчиняются ряду технических ограничений:

  • изображение должно быть tileable (бесшовным)
  • предпочтительно квадратное соотношение сторон
  • прозрачность через alpha-канал допустима
  • минимизация резких границ

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

  • SVG → raster pipeline
  • procedural textures
  • canvas-generated patterns

Процедурная генерация текстур

Паттерны могут быть созданы динамически через <canvas>:

const canvas = document.createElement('canvas');
canvas.width = 64;
canvas.height = 64;

const ctx = canvas.getContext('2d');

ctx.strokeStyle = '#000';
ctx.lineWidth = 2;

ctx.moveTo(0, 0);
ctx.lineTo(64, 64);
ctx.stroke();

map.addImage('dynamic-pattern', canvas);

Этот подход позволяет:

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

Данные и условные паттерны

MapLibre GL JS поддерживает data-driven styling, где паттерн выбирается на основе атрибутов GeoJSON или векторных тайлов.

'fill-pattern': [
  'match',
  ['get', 'type'],
  'forest', 'forest-pattern',
  'water', 'water-pattern',
  'urban', 'urban-pattern',
  'default-pattern'
]

Это позволяет создавать семантически различимую карту без увеличения цветовой сложности.

Комбинирование паттернов с цветом

Паттерны не исключают использование цвета. Возможны комбинированные стили:

  • полупрозрачный fill-color
  • текстурный fill-pattern
  • смешивание через opacity
paint: {
  'fill-color': 'rgba(0, 128, 0, 0.2)',
  'fill-pattern': 'forest-texture'
}

Такой подход используется для:

  • климатических карт
  • плотности растительности
  • тематических слоёв

Масштабирование и производительность

Паттерны напрямую влияют на GPU-рендеринг. Основные оптимизационные принципы:

  • минимизация количества уникальных изображений
  • использование sprite вместо отдельных ресурсов
  • избегание слишком мелких паттернов (aliasing)
  • кэширование текстур на уровне GPU

При высоком zoom увеличивается нагрузка на повторяющийся рендеринг, поэтому предпочтительно использовать адаптивные паттерны.

Ограничения системы паттернов

Существуют архитектурные ограничения:

  • отсутствует трансформация паттерна по углу (для fill-pattern)
  • ограниченная анимация
  • невозможность частичной деформации изображения
  • фиксированная система тайлинга

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

  • несколько слоёв
  • смешанные источники данных
  • canvas-based overlays

Использование паттернов в сложных стилях

В сложных картографических стилях паттерны комбинируются с:

  • heatmap слоями
  • extruded polygons
  • symbol layers
  • terrain shading

Пример многослойной структуры:

  • базовый fill-color
  • поверх fill-pattern
  • затем line-layer для границ
  • символы поверх для подписей

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

Совместимость форматов изображений

Поддерживаемые форматы:

  • PNG (основной для паттернов)
  • WebP (в некоторых сборках)
  • JPEG (ограниченно, без прозрачности)

PNG остаётся стандартом из-за поддержки alpha-канала и предсказуемого рендеринга.

Повторяемость и координатная система

Паттерны в MapLibre GL JS фиксируются в экранных координатах (screen space), а не в географических координатах. Это означает:

  • паттерн не искажается при проекции
  • масштаб влияет на частоту повторения
  • поворот карты не изменяет ориентацию текстуры

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

Оглавление