Heatmap-radius

Плотность тепловой карты в Mapbox GL JS напрямую зависит от параметров визуализации слоя типа heatmap. Одним из ключевых параметров, определяющих характер сглаживания и радиус влияния каждой точки, является heatmap-radius. Этот параметр управляет тем, насколько далеко распространяется вклад каждой точки данных при расчёте интенсивности тепла.

Назначение параметра heatmap-radius

heatmap-radius определяет радиус влияния каждой точки данных в пикселях. Чем больше значение, тем более «размытой» и обобщённой становится тепловая карта. Чем меньше — тем более локализованной и точечной.

r =

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

Принцип работы радиуса в heatmap

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

При увеличении радиуса:

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

При уменьшении радиуса:

  • влияние точек становится более локальным;
  • появляются «зернистые» структуры;
  • хорошо видны отдельные кластеры и скопления;
  • снижается уровень общего сглаживания.

Связь с плотностью данных

heatmap-radius необходимо интерпретировать вместе с плотностью входных данных. Один и тот же радиус может давать разные визуальные эффекты в зависимости от количества точек.

При высокой плотности данных:

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

При низкой плотности данных:

  • малый радиус делает карту фрагментированной;
  • большой радиус компенсирует разреженность и создаёт читаемую структуру.

Анимация и динамическое изменение radius

heatmap-radius поддерживает выражения и может изменяться динамически в зависимости от масштаба карты (zoom). Это позволяет адаптировать визуализацию к уровню детализации.

Типичный подход — увеличение радиуса при уменьшении масштаба карты:

r(z) = a z + b

где:

  • z — уровень zoom;
  • a, b — коэффициенты линейной зависимости.

На практике чаще используется экспоненциальная или ступенчатая интерполяция, чтобы более точно контролировать визуальное восприятие.

Использование выражений в Mapbox GL JS

В Mapbox GL JS параметр heatmap-radius может задаваться через interpolate, что позволяет плавно менять радиус при изменении масштаба.

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

  • на низком zoom — большой радиус для обобщённой картины;
  • на высоком zoom — малый радиус для детализации.

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

Влияние единиц измерения

Значение heatmap-radius всегда задаётся в пикселях экрана, а не в метрах или географических единицах. Это означает:

  • при одном и том же значении радиуса визуальный эффект будет разным на устройствах с разным разрешением;
  • масштабирование карты изменяет реальную географическую площадь, покрываемую радиусом;
  • при увеличении zoom радиус охватывает меньшую географическую область.

Таким образом, радиус — экранно-ориентированный параметр, тесно связанный с визуальным масштабом.

Влияние на алгоритм kernel density estimation

Heatmap в Mapbox GL JS основан на принципах Kernel Density Estimation (KDE). heatmap-radius фактически задаёт ширину ядра функции распределения.

Обобщённая модель влияния точки:

K(x) = e^{-}

где:

  • d(x, x_i) — расстояние до точки;
  • r — радиус влияния (heatmap-radius);
  • K(x) — вклад точки в интенсивность.

При увеличении r распределение становится более пологим, при уменьшении — более острым.

Взаимодействие с heatmap-weight

heatmap-radius не работает изолированно. Его визуальный эффект тесно связан с heatmap-weight.

  • heatmap-radius определяет геометрию влияния;
  • heatmap-weight определяет силу влияния каждой точки.

При одинаковом радиусе увеличение веса усиливает интенсивность, но не расширяет область влияния. И наоборот, увеличение радиуса расширяет область, но не обязательно увеличивает пиковую интенсивность.

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

Увеличение heatmap-radius влияет на производительность, поскольку увеличивает количество пикселей, участвующих в вычислениях для каждой точки.

Основные последствия:

  • рост нагрузки на GPU;
  • увеличение стоимости рендеринга при большом количестве точек;
  • возможное снижение FPS на слабых устройствах.

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

Практическая интерпретация значений

Типовые диапазоны значений:

  • 5–10 px — высокая детализация, «шумная» карта;
  • 10–30 px — сбалансированная визуализация;
  • 30–50 px — сглаженные региональные паттерны;
  • 50+ px — сильно обобщённая тепловая поверхность.

Эти значения не являются фиксированными правилами, но отражают общие принципы восприятия плотности.

Поведение при масштабировании карты

При изменении zoom радиус может восприниматься по-разному:

  • при увеличении zoom визуально уменьшается область влияния одной точки в географических координатах;
  • при уменьшении zoom одна и та же точка «разрастается» относительно карты.

Это создаёт эффект стабильной плотности при разных уровнях приближения при правильно настроенной интерполяции радиуса.

Использование с step-выражениями

Step-выражения позволяют задавать дискретные изменения радиуса:

r(z) =

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

Связь с визуальным восприятием плотности

heatmap-radius влияет не только на технические характеристики слоя, но и на восприятие данных:

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

Правильная настройка радиуса определяет читаемость тепловой карты и её аналитическую ценность.

Оглавление