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

Геометрическая интерпретация радиуса в веб-картах

В контексте Mapbox GL JS радиус влияния точки не является встроенным геометрическим объектом в чистом виде — он формируется на уровне визуализации, данных или пространственных запросов.

Радиус может трактоваться в трёх основных измерениях:

  • Экранный радиус (пиксели) — используется в стилях и взаимодействии с пользователем
  • Географический радиус (метры/километры) — применяется в аналитике и фильтрации данных
  • Условный радиус влияния (data-driven) — используется для heatmap и density-слоёв

Каждый из этих подходов опирается на разные механизмы работы движка WebGL и источников данных GeoJSON.

Экранный радиус: визуальное влияние точек

На уровне стилей радиус часто задаётся через свойства слоёв типа circle и heatmap.

Для слоя circle ключевым параметром выступает:

map.addLayer({
  id: 'points',
  type: 'circle',
  source: 'points-source',
  paint: {
    'circle-radius': 10,
    'circle-color': '#ff0000'
  }
});

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

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

'circle-radius': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 2,
  10, 8,
  15, 20
]

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

Радиус влияния через heatmap-слои

Heatmap в Mapbox GL JS моделирует плотность точек как непрерывное поле влияния.

Ключевые параметры:

  • heatmap-radius — радиус влияния точки
  • heatmap-intensity — сила влияния
  • heatmap-weight — вес отдельной точки

Пример конфигурации:

map.addLayer({
  id: 'heatmap-layer',
  type: 'heatmap',
  source: 'points-source',
  paint: {
    'heatmap-radius': 30,
    'heatmap-intensity': 1,
    'heatmap-opacity': 0.8
  }
});

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

Географический радиус: метрическая модель влияния

Для задач анализа данных требуется радиус в реальных единицах измерения. Mapbox GL JS работает в координатах WGS84 (долгота/широта), поэтому прямое вычисление расстояний требует геодезических формул.

Используется формула гаверсинуса или специализированные библиотеки, такие как Turf.js.

Пример фильтрации точек в радиусе 5 км:

import * as turf from '@turf/turf';

const center = turf.point([76.9457, 43.2551]);
const radius = 5;
const options = { units: 'kilometers' };

const buffered = turf.buffer(center, radius, options);

Далее результат используется для фильтрации GeoJSON:

const pointsWithin = turf.pointsWithinPolygon(points, buffered);

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

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

В Mapbox GL JS существует разрыв между экранными и географическими координатами. Один и тот же радиус в пикселях соответствует разным расстояниям в метрах в зависимости от зума и широты.

Для преобразования используется:

  • map.project(lngLat) — перевод в экранные координаты
  • map.unproject(point) — обратное преобразование

Пример вычисления географического радиуса из пикселей:

const center = map.project([76.9457, 43.2551]);
const edge = { x: center.x + 50, y: center.y };

const lngLatEdge = map.unproject(edge);

Далее расстояние между точками вычисляется как географическая дистанция.

Радиус влияния через spatial query API

Mapbox GL JS предоставляет методы выборки объектов в пределах экрана:

map.queryRenderedFeatures(point, {
  layers: ['points']
});

Однако этот метод работает в пределах пиксельного радиуса, который задаётся вручную:

const bbox = [
  [x - r, y - r],
  [x + r, y + r]
];

map.queryRenderedFeatures(bbox, {
  layers: ['points']
});

Таким образом формируется квадратная зона влияния, которая часто аппроксимирует круговой радиус.

Геометрическая точность и искажения карты

При использовании проекции Web Mercator возникают искажения:

  • расстояния увеличиваются при удалении от экватора
  • круг в географических координатах становится эллипсом на экране
  • пиксельный радиус остаётся стабильным, но теряет метрический смысл

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

  • визуальный радиус — через стили
  • аналитический радиус — через геометрию
  • интерактивный радиус — через spatial query

Радиус влияния в data-driven стилях

Mapbox GL JS поддерживает выражения, позволяющие динамически изменять радиус:

'circle-radius': [
  'interpolate',
  ['linear'],
  ['get', 'value'],
  0, 2,
  100, 20
]

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

Наложение радиусов и визуальная агрегация

При большом количестве точек радиусы начинают перекрываться, формируя:

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

Кластеризация активируется на уровне источника данных:

const source = {
  type: 'geojson',
  data: points,
  cluster: true,
  clusterRadius: 50
};

clusterRadius определяет расстояние в пикселях, в пределах которого точки объединяются.

Динамический радиус в зависимости от масштаба

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

'heatmap-radius': [
  'interpolate',
  ['exponential', 2],
  ['zoom'],
  0, 2,
  10, 20,
  15, 40
]

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

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

Обобщённая модель радиуса влияния в Mapbox GL JS включает три слоя:

  • Визуальный слой — circle-radius, heatmap-radius
  • Геометрический слой — buffer, distance, turf.circle
  • Интерактивный слой — queryRenderedFeatures, hit detection

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

Оглавление