Heatmap-color

Свойство heatmap-color определяет цветовую шкалу тепловой карты в слое типа heatmap. Оно отвечает за преобразование плотности данных (density) в визуальное представление цвета и является ключевым инструментом для интерпретации распределения точек.

В Mapbox GL JS цвет тепловой карты задаётся через интерполяцию значений плотности, нормализованных в диапазоне от 0 до 1. Эти значения не являются абсолютными координатами или количествами объектов — это результат внутреннего расчёта веса и плотности точек в пиксельной сетке.

Базовая структура heatmap-color

Свойство heatmap-color относится к paint-параметрам слоя:

map.addLayer({
  id: 'heatmap-layer',
  type: 'heatmap',
  source: 'points',
  paint: {
    'heatmap-color': [
      'interpolate',
      ['linear'],
      ['heatmap-density'],
      0, 'rgba(0,0,255,0)',
      0.2, 'blue',
      0.4, 'cyan',
      0.6, 'lime',
      0.8, 'yellow',
      1, 'red'
    ]
  }
});

В этом выражении используется выражение интерполяции (interpolate), которое связывает числовое значение плотности с конкретным цветом.

heatmap-density как основа цветовой модели

Внутренний параметр heatmap-density вычисляется для каждого пикселя слоя. Он зависит от:

  • количества точек в области
  • веса каждой точки (heatmap-weight)
  • радиуса влияния (heatmap-radius)
  • масштаба (zoom level)

Значение всегда нормализовано в диапазоне:

0 → нет влияния точек
1 → максимальная плотность

Именно это значение подаётся в heatmap-color для преобразования в цвет.

Интерполяция цветов

Наиболее часто используется функция:

['interpolate', ['linear'], ['heatmap-density'], ...]

Логика работы

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

density → color

Пример логики:

  • 0.0 → прозрачный синий
  • 0.3 → синий
  • 0.5 → голубой
  • 0.7 → жёлтый
  • 1.0 → красный

Mapbox вычисляет промежуточные цвета автоматически.

Пример классической тепловой шкалы

'heatmap-color': [
  'interpolate',
  ['linear'],
  ['heatmap-density'],
  0, 'rgba(33,102,172,0)',
  0.2, 'rgb(103,169,207)',
  0.4, 'rgb(209,229,240)',
  0.6, 'rgb(253,219,199)',
  0.8, 'rgb(239,138,98)',
  1, 'rgb(178,24,43)'
]

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

Влияние прозрачности

Цвета в heatmap-color часто содержат альфа-канал. Это позволяет:

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

Пример:

0, 'rgba(0, 0, 255, 0)'

Нулевая плотность полностью прозрачна, что сохраняет читаемость карты.

Связь heatmap-color с heatmap-weight

Хотя heatmap-color работает с heatmap-density, итоговое распределение сильно зависит от веса точек:

'heatmap-weight': [
  'interpolate',
  ['linear'],
  ['get', 'value'],
  0, 0,
  10, 1
]

Если веса увеличиваются, плотность возрастает, и цветовая шкала начинает «сдвигаться» в сторону более горячих оттенков.

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

Цветовая интерпретация часто комбинируется с масштабом карты:

'heatmap-intensity': [
  'interpolate',
  ['linear'],
  ['zoom'],
  0, 1,
  9, 3
]

Хотя это не напрямую heatmap-color, визуально оно влияет на восприятие цветов, так как изменяет плотность.

Использование step вместо interpolate

Вместо плавной интерполяции можно использовать дискретные зоны:

'heatmap-color': [
  'step',
  ['heatmap-density'],
  'blue',
  0.3, 'cyan',
  0.6, 'yellow',
  0.9, 'red'
]

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

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

Логарифмическое восприятие цвета

Человеческое восприятие плотности нелинейно. Поэтому часто применяются нелинейные схемы через:

  • экспоненциальную интерполяцию
  • ручную корректировку контрольных точек

Пример:

['interpolate', ['exponential', 1.5], ['heatmap-density'], ...]

Повышенный коэффициент делает переходы более контрастными в высоких значениях.

Подбор цветовой схемы

Низкая плотность

Используются холодные и прозрачные цвета:

  • rgba(0,0,255,0)
  • синий
  • голубой

Средняя плотность

  • зелёный
  • бирюзовый
  • жёлто-зелёный

Высокая плотность

  • оранжевый
  • красный
  • тёмно-красный

Такое распределение соответствует интуитивной температурной модели.

Ошибки при настройке heatmap-color

Отсутствие прозрачности

Если первый цвет не имеет alpha = 0, карта становится перегруженной:

0, 'blue' // ошибка визуальной читаемости

Неправильный порядок значений

Значения density должны строго возрастать:

0 → 0.2 → 0.5 → 1

Нарушение приводит к некорректной интерполяции.

Комбинация с heatmap-radius

heatmap-radius изменяет область влияния точек, что напрямую влияет на распределение цвета:

'heatmap-radius': [
  'interpolate',
  ['linear'],
  ['zoom'],
  0, 2,
  9, 20
]

При увеличении радиуса цветовые зоны становятся более гладкими и широкими.

Динамическая адаптация цветовой шкалы

В сложных приложениях heatmap-color может изменяться в зависимости от:

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

Пример зависимости от zoom:

'heatmap-color': [
  'interpolate',
  ['linear'],
  ['zoom'],
  0,
  [
    'interpolate',
    ['linear'],
    ['heatmap-density'],
    0, 'blue',
    1, 'red'
  ],
  10,
  [
    'interpolate',
    ['linear'],
    ['heatmap-density'],
    0, 'green',
    1, 'yellow'
  ]
]

Практическая модель построения шкалы

При проектировании heatmap-color учитываются три уровня:

  1. Семантический — что означает цвет (холод/тепло)
  2. Функциональный — как различать плотности
  3. Оптический — как воспринимается контраст

Эти уровни должны быть согласованы, иначе тепловая карта теряет информативность.

Использование в аналитических интерфейсах

heatmap-color часто применяется в:

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

В каждом случае цветовая шкала настраивается под диапазон данных, а не под фиксированные значения.

Связь с производительностью

Хотя heatmap-color не является вычислительно тяжёлым параметром, сложные выражения:

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

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

Контроль визуальной читаемости

Эффективная тепловая карта достигается балансом:

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

Чрезмерное количество цветов ухудшает интерпретацию данных.

Оглавление