Работа с цветами

В MapLibre GL JS работа с цветами строится вокруг спецификации стилей Mapbox Style Specification, где цветовые значения используются в свойствах слоя (paint properties) и задаются в нескольких форматах: строковом, массивном и функциональном.

Поддерживаемые формы задания цвета:

  • HEX: #ff0000, #00ff88
  • HEX с альфа-каналом: #ff000080
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(255, 0, 0, 0.5)
  • HSL: hsl(120, 100%, 50%)
  • HSLA: hsla(120, 100%, 50%, 0.5)
  • именованные цвета CSS: red, blue, transparent

На уровне спецификации все значения нормализуются во внутреннее представление, что позволяет единообразно использовать их в рендерере независимо от исходного формата.

Цвета в слоях (paint properties)

Цвет в MapLibre GL JS задаётся преимущественно через свойства paint у слоёв. Каждый тип слоя имеет собственный набор цветовых параметров.

Fill-слои

{
  id: 'land',
  type: 'fill',
  source: 'countries',
  paint: {
    'fill-color': '#2a9d8f',
    'fill-opacity': 0.8
  }
}

Основные свойства:

  • fill-color — цвет заливки полигона
  • fill-opacity — прозрачность

Line-слои

{
  id: 'roads',
  type: 'line',
  source: 'roads',
  paint: {
    'line-color': '#e76f51',
    'line-width': 2
  }
}

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

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

Circle-слои

{
  id: 'cities',
  type: 'circle',
  source: 'points',
  paint: {
    'circle-radius': 6,
    'circle-color': '#264653',
    'circle-stroke-color': '#ffffff',
    'circle-stroke-width': 1
  }
}

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

Цвет как выражение (expressions)

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

Интерполяция (interpolate)

Позволяет строить плавные цветовые градиенты:

'fill-color': [
  'interpolate',
  ['linear'],
  ['get', 'population'],
  0, '#edf8fb',
  1000, '#b2e2e2',
  10000, '#66c2a4',
  50000, '#238b45'
]

Смысл:

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

Шкала соответствия (match)

Используется для дискретной классификации:

'circle-color': [
  'match',
  ['get', 'type'],
  'capital', '#e63946',
  'city', '#457b9d',
  'village', '#a8dadc',
  '#cccccc'
]

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

  • строгое сопоставление значений
  • последний аргумент — цвет по умолчанию

Логические выражения

Цвет может зависеть от условий:

'line-color': [
  'case',
  ['>', ['get', 'traffic'], 0.8],
  '#d00000',
  '#2a9d8f'
]

Прозрачность и альфа-канал

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

Через отдельные свойства

'fill-opacity': 0.5

Через RGBA

'fill-color': 'rgba(42, 157, 143, 0.5)'

Различие:

  • opacity применяется ко всему слою
  • alpha в цвете может комбинироваться с другими выражениями

Работа с градиентами

Градиенты используются в линиях и заливках для визуализации интенсивности или направления.

Линейные градиенты

'line-gradient': [
  'interpolate',
  ['linear'],
  ['line-progress'],
  0, '#00ff00',
  0.5, '#ffff00',
  1, '#ff0000'
]

Применяется для:

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

Дата-ориентированная стилизация цвета

Цвет часто зависит от свойств геоданных.

Пример классификации по числовому значению

'fill-color': [
  'interpolate',
  ['linear'],
  ['get', 'density'],
  0, '#f7fbff',
  50, '#c6dbef',
  100, '#6baed6',
  200, '#2171b5'
]

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

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

Цветовые палитры и дизайн-системы

В практических приложениях цвета часто выносятся в централизованные палитры:

const palette = {
  primary: '#1d3557',
  secondary: '#457b9d',
  accent: '#e63946',
  neutral: '#f1faee'
};

Далее используются в стиле:

'background-color': palette.primary

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

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

Темизация (light/dark mode)

Цвета могут адаптироваться под тему интерфейса:

'background-color': [
  'case',
  ['==', ['get', 'theme'], 'dark'],
  '#0b1320',
  '#ffffff'
]

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

Цвета в тепловых картах (heatmap)

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

'heatmap-color': [
  'interpolate',
  ['linear'],
  ['heatmap-density'],
  0, 'rgba(0,0,255,0)',
  0.2, 'royalblue',
  0.4, 'cyan',
  0.6, 'lime',
  0.8, 'yellow',
  1, 'red'
]

Характеристики:

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

Смешивание цветов и визуальная иерархия

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

  • фоновые слои используют приглушённые оттенки
  • активные объекты выделяются контрастом
  • вспомогательные элементы используют низкую насыщенность

Пример:

'background-color': '#f8f9fa',
'water-color': '#a8dadc',
'road-color': '#e76f51'

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

Цвета и масштабирование (zoom-dependent styling)

Цвет может изменяться в зависимости от масштаба:

'fill-color': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, '#a8dadc',
  10, '#457b9d',
  15, '#1d3557'
]

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

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

Особенности производительности

Использование сложных выражений цвета влияет на производительность рендеринга:

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

Векторный рендеринг MapLibre оптимизирован под GPU, но сложные цветовые вычисления остаются затратными при большом количестве объектов.

Типичные ошибки при работе с цветами

  • использование некорректных форматов (например, rgb(300,0,0))
  • смешивание opacity и alpha без учёта итоговой прозрачности
  • чрезмерное количество цветовых остановок в interpolate
  • отсутствие fallback-цвета в match
  • слабый контраст между слоями

Взаимодействие цвета с другими свойствами слоя

Цвет редко используется изолированно. На визуальный результат влияют:

  • opacity
  • blur
  • width
  • offset
  • stroke параметры

Пример комплексного стилизованного слоя:

{
  id: 'water',
  type: 'fill',
  paint: {
    'fill-color': '#a8dadc',
    'fill-opacity': 0.7,
    'fill-outline-color': '#457b9d'
  }
}
Оглавление