Paint свойства

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

Paint-свойства применяются ко всем типам слоёв, но набор доступных параметров зависит от типа слоя: fill, line, circle, symbol, raster, heatmap, fill-extrusion и других. Каждое paint-свойство может быть статическим значением или выражением, зависящим от данных, масштаба или состояния карты.

Общая структура paint-свойств

Paint-конфигурация слоя задаётся внутри объекта слоя:

map.addLayer({
  id: 'water-layer',
  type: 'fill',
  source: 'map-data',
  'source-layer': 'water',
  paint: {
    'fill-color': '#2a6f97',
    'fill-opacity': 0.8
  }
});

Каждое свойство имеет строго определённый формат:

  • числовое значение
  • строка (цвет, выражение)
  • массив (интерполяции)
  • ex * pression (выражения MapLibre Style Specification)

Динамическая стилизация через выражения

Paint-свойства поддерживают выражения, позволяющие строить адаптивную визуализацию:

'circle-radius': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 2,
  10, 6,
  15, 12
]

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

Другой пример — стилизация по свойствам данных:

'fill-color': [
  'match',
  ['get', 'type'],
  'forest', '#2e7d32',
  'water', '#1565c0',
  'urban', '#616161',
  '#cccccc'
]

Основные paint-свойства для fill-слоёв

Fill-слои используются для полигонов: административные границы, водоёмы, зоны, здания.

fill-color

Определяет цвет заливки полигона.

'fill-color': '#3b82f6'

Поддерживает выражения:

'fill-color': [
  'interpolate',
  ['linear'],
  ['get', 'density'],
  0, '#f0f9ff',
  100, '#0ea5e9'
]

fill-opacity

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

'fill-opacity': 0.5

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

fill-outline-color

Отдельный цвет обводки полигона:

'fill-outline-color': '#1e3a8a'

Особенно полезно при визуализации административных границ.

fill-pattern

Позволяет использовать изображения вместо цвета:

'fill-pattern': 'diagonal-stripes'

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

Paint-свойства line-слоёв

Line-слои применяются для маршрутов, границ, дорог и контуров.

line-color

Основной цвет линии:

'line-color': '#ef4444'

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

'line-color': [
  'case',
  ['==', ['get', 'highway'], true],
  '#ff0000',
  '#999999'
]

line-width

Толщина линии:

'line-width': 3

С масштабированием:

'line-width': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 0.5,
  10, 2,
  15, 6
]

line-opacity

Прозрачность линии:

'line-opacity': 0.7

line-dasharray

Создание пунктирных линий:

'line-dasharray': [2, 1]

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

line-blur

Размытие линии:

'line-blur': 1.5

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

Paint-свойства circle-слоёв

Circle-слои используются для точечных данных: города, объекты, события.

circle-radius

Радиус точки:

'circle-radius': 6

С данными:

'circle-radius': [
  'interpolate',
  ['linear'],
  ['get', 'population'],
  1000, 2,
  1000000, 10
]

circle-color

Цвет маркера:

'circle-color': '#22c55e'

circle-opacity

Прозрачность:

'circle-opacity': 0.9

circle-stroke-color и circle-stroke-width

Обводка точки:

'circle-stroke-color': '#ffffff',
'circle-stroke-width': 2

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

Paint-свойства fill-extrusion (3D-слои)

Используются для построения 3D-объектов, чаще всего зданий.

fill-extrusion-color

Цвет 3D-объекта:

'fill-extrusion-color': '#a3a3a3'

С данными:

'fill-extrusion-color': [
  'interpolate',
  ['linear'],
  ['get', 'height'],
  0, '#d1d5db',
  100, '#374151'
]

fill-extrusion-height

Высота экструдирования:

'fill-extrusion-height': ['get', 'height']

fill-extrusion-opacity

Прозрачность 3D:

'fill-extrusion-opacity': 0.8

fill-extrusion-base

Базовая высота:

'fill-extrusion-base': ['get', 'min_height']

Позволяет строить реалистичные здания с учётом рельефа.

Heatmap paint-свойства

Heatmap-слои визуализируют плотность точек.

heatmap-color

Цветовая шкала плотности:

'heatmap-color': [
  'interpolate',
  ['linear'],
  ['heatmap-density'],
  0, 'rgba(0,0,255,0)',
  0.5, 'rgba(0,255,0,0.5)',
  1, 'rgba(255,0,0,1)'
]

heatmap-intensity

Интенсивность влияния точек:

'heatmap-intensity': 1.2

heatmap-radius

Радиус влияния точки:

'heatmap-radius': 20

heatmap-opacity

Общая прозрачность:

'heatmap-opacity': 0.6

Background paint-свойства

Фон карты задаётся через background-слой.

background-color

'background-color': '#0f172a'

background-opacity

'background-opacity': 1

Интерполяция и масштабно-зависимые стили

Paint-свойства активно используют zoom-based стилизацию. Это позволяет менять визуализацию в зависимости от масштаба карты.

Пример:

'circle-radius': [
  'interpolate',
  ['exponential', 1.5],
  ['zoom'],
  3, 1,
  10, 5,
  18, 20
]

Такой подход применяется для:

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

Состояния feature-state в paint-свойствах

Paint может реагировать на интерактивные состояния объектов:

'fill-color': [
  'case',
  ['boolean', ['feature-state', 'hover'], false],
  '#f59e0b',
  '#3b82f6'
]

Это используется для:

  • hover-эффектов
  • выделения выбранных объектов
  • динамического обновления интерфейса без перерисовки слоя

Transition-эффекты

Некоторые paint-свойства поддерживают плавные переходы:

paint: {
  'fill-opacity': 0.7,
  'fill-opacity-transition': {
    duration: 300,
    delay: 0
  }
}

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

Приоритеты и переопределение paint-свойств

Если одно и то же свойство задано несколькими механизмами (статически и через expression), приоритет имеет expression. При обновлении слоя через setPaintProperty значение заменяет предыдущее полностью:

map.setPaintProperty('water-layer', 'fill-color', '#1e40af');

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

Paint-свойства напрямую влияют на рендеринг WebGL-контекста:

  • сложные expressions увеличивают нагрузку на GPU
  • большое количество интерполяций снижает FPS
  • прозрачность (opacity < 1) может замедлять отрисовку из-за blending
  • blur и shadow-эффекты требуют дополнительных вычислений

Оптимизация достигается за счёт:

  • минимизации вложенных выражений
  • кэширования стилей
  • использования zoom-ступеней вместо непрерывной интерполяции
  • разделения слоёв по типам визуализации
Оглавление