Radius и limit

В визуализации данных в Mapbox GL JS параметр радиуса является ключевым инструментом управления масштабом и выразительностью отображаемых объектов. Он используется в различных слоях и типах визуализации, включая точечные данные, тепловые карты и кластеры.

circle-radius в CircleLayer

Основное применение радиуса в Mapbox GL JS связано с типом слоя circle. Свойство circle-radius определяет размер окружности в пикселях, которые будут отрисованы для каждой точки.

map.addLayer({
  id: 'cities',
  type: 'circle',
  source: 'cities-source',
  paint: {
    'circle-radius': 6,
    'circle-color': '#3b82f6'
  }
});

Радиус задаётся в экранных пикселях, а не в метрах или географических единицах, что делает поведение зависимым от масштаба карты.

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

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

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

Такой подход позволяет:

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

Радиус на основе свойств данных

Радиус может зависеть от атрибутов GeoJSON:

'circle-radius': [
  'step',
  ['get', 'population'],
  3,
  100000,
  6,
  1000000,
  12
]

Это позволяет визуализировать величину явления напрямую через размер объекта.

Heatmap-radius и плотностные визуализации

В слоях типа heatmap параметр heatmap-radius определяет влияние каждой точки на окружающее пространство.

map.addLayer({
  id: 'heat',
  type: 'heatmap',
  source: 'points',
  paint: {
    'heatmap-radius': 20,
    'heatmap-opacity': 0.8
  }
});

Особенности heatmap-radius

  • задаётся в пикселях
  • определяет «размытие» влияния точки
  • влияет на плавность градиента
  • критически влияет на восприятие плотности данных

Увеличение радиуса делает карту более сглаженной, уменьшение — более детализированной и «шумной».

Radius в кластеризации данных

При работе с GeoJSONSource радиус играет важную роль в алгоритме кластеризации.

map.addSource('earthquakes', {
  type: 'geojson',
  data: 'earthquakes.geojson',
  cluster: true,
  clusterRadius: 50
});

clusterRadius

clusterRadius определяет максимальное расстояние между точками (в пикселях), при котором они объединяются в кластер.

Поведение clusterRadius:

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

clusterMaxZoom

Дополнительный параметр, ограничивающий уровень зума, на котором кластеризация активна:

clusterMaxZoom: 14

После достижения этого уровня данные перестают группироваться.

Ограничения (limits) в Mapbox GL JS

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

Ограничение количества отображаемых объектов

Mapbox GL JS не имеет явного универсального параметра limit для всех API, однако ограничения проявляются через:

  • количество рендеримых фич на тайл
  • сложность выражений в стилях
  • плотность данных в viewport
  • производительность WebGL

При чрезмерном количестве объектов может наблюдаться:

  • падение FPS
  • задержки при зуме
  • частичная отрисовка слоёв

Ограничения выборки данных

При запросах к отрисованным объектам используется метод queryRenderedFeatures, который возвращает все попавшие в область видимости элементы.

const features = map.queryRenderedFeatures({
  layers: ['cities']
});

Практические ограничения

Хотя явный параметр limit не является основным механизмом API, ограничения проявляются через:

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

Для уменьшения нагрузки применяется:

  • ограничение bbox (bounding box)
  • фильтрация по слоям
  • предварительная агрегация данных

Радиус как инструмент пространственного фильтра

Радиус часто используется как логическая метрика поиска близости.

Пример поиска ближайших точек

const center = map.getCenter();

const bbox = [
  center.lng - 0.05,
  center.lat - 0.05,
  center.lng + 0.05,
  center.lat + 0.05
];

const features = map.queryRenderedFeatures({
  layers: ['points'],
  filter: ['==', 'type', 'restaurant']
});

Хотя прямого радиусного фильтра в core API нет, радиус имитируется через:

  • преобразование радиуса в bounding box
  • использование Turf.js (turf.circle, turf.buffer)
  • геометрические вычисления на стороне клиента

Геометрический радиус и Turf-интеграция

Для точных операций используется библиотека геопространственных вычислений.

Построение круга радиуса

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

const center = turf.point([30.5, 50.5]);
const radius = 5;
const options = { steps: 64, units: 'kilometers' };

const circle = turf.circle(center, radius, options);

Этот подход позволяет:

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

Радиус и визуальная иерархия

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

Принципы:

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

Производственные ограничения и оптимизация радиуса

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

Основные факторы нагрузки:

  • сложные интерполяции interpolate
  • частые пересчёты стиля при zoom
  • большое количество overlapping features
  • кластеризация с малым clusterRadius

Практические подходы оптимизации:

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

Взаимосвязь radius и scale-dependent rendering

Radius тесно связан с масштабированием сцены.

Масштабозависимая логика:

  • при малом zoom: маленький radius, высокая агрегация
  • при среднем zoom: баланс детализации и читаемости
  • при большом zoom: увеличение radius для точечной выразительности

Радиус как элемент UX в картографических интерфейсах

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

  • визуализация зон доставки
  • отображение радиуса поиска
  • выделение области влияния объекта
  • анализ плотности событий

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

Оглавление