Circle-radius, circle-color

Слой типа circle в Mapbox GL JS предназначен для отображения точечных объектов в виде окружностей. В отличие от стандартных маркеров HTML, круги рендерятся средствами WebGL непосредственно на карте, обеспечивая высокую производительность даже при работе с тысячами и десятками тысяч объектов.

Наиболее часто используемыми параметрами оформления кругов являются:

  • circle-radius — определяет радиус окружности;
  • circle-color — задаёт цвет заливки окружности.

Оба свойства относятся к разделу paint и могут принимать как фиксированные значения, так и сложные выражения (expressions), вычисляемые на основе данных объекта, масштаба карты или других условий.

Добавление слоя кругов

Базовый пример создания слоя:

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

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

Свойство circle-radius

Назначение

Свойство определяет размер круга в пикселях.

Простейший вариант:

paint: {
    'circle-radius': 10
}

Каждый объект будет отображаться кругом радиусом 10 пикселей независимо от масштаба карты и атрибутов объекта.

Диапазон значений

Допустимы положительные числовые значения:

'circle-radius': 2
'circle-radius': 15
'circle-radius': 30

Малые значения подходят для отображения большого количества объектов.

Крупные радиусы используются для:

  • выделения важных точек;
  • визуализации плотности данных;
  • построения пузырьковых карт (Bubble Maps).

Изменение радиуса в зависимости от масштаба

Одна из самых распространённых задач — увеличение размера круга при приближении карты.

Для этого используется выражение interpolate.

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

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

Масштаб Радиус
5 2
10 6
15 15

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

Использование экспоненциальной интерполяции

Для более естественного роста размера применяется экспоненциальная зависимость.

paint: {
    'circle-radius': [
        'interpolate',
        ['exponential', 2],
        ['zoom'],
        5, 2,
        15, 30
    ]
}

Чем выше коэффициент, тем быстрее увеличивается размер окружности на больших масштабах.

Радиус на основе атрибутов объекта

Предположим, что данные содержат численность населения:

{
    "city": "Almaty",
    "population": 2150000
}

Размер круга можно связать с этим значением:

paint: {
    'circle-radius': [
        'interpolate',
        ['linear'],
        ['get', 'population'],
        100000, 4,
        1000000, 10,
        3000000, 25
    ]
}

Города с большим населением будут отображаться более крупными кругами.

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

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

Для дискретного изменения размера применяется функция step.

paint: {
    'circle-radius': [
        'step',
        ['get', 'population'],
        5,
        500000, 10,
        1000000, 15,
        2000000, 25
    ]
}

Результат:

Население Радиус
< 500000 5
≥ 500000 10
≥ 1000000 15
≥ 2000000 25

В отличие от interpolate, переходы происходят скачкообразно.

Комбинация данных и масштаба

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

paint: {
    'circle-radius': [
        'interpolate',
        ['linear'],
        ['zoom'],
        5,
        [
            'interpolate',
            ['linear'],
            ['get', 'population'],
            100000, 2,
            3000000, 10
        ],
        15,
        [
            'interpolate',
            ['linear'],
            ['get', 'population'],
            100000, 8,
            3000000, 40
        ]
    ]
}

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

Свойство circle-color

Назначение

Определяет цвет внутренней области круга.

Пример:

paint: {
    'circle-color': '#ef4444'
}

Все объекты будут окрашены красным цветом.

Форматы цветов

Mapbox GL JS поддерживает несколько способов задания цвета.

HEX

'circle-color': '#2563eb'

RGB

'circle-color': 'rgb(37, 99, 235)'

RGBA

'circle-color': 'rgba(37, 99, 235, 0.5)'

Полезно для полупрозрачных объектов.

Именованные цвета

'circle-color': 'green'

Хотя поддерживается, в производственных проектах чаще используются HEX или RGB.

Цвет по значению атрибута

Рассмотрим данные:

{
    "status": "active"
}

Цвет можно выбирать по значению свойства.

paint: {
    'circle-color': [
        'match',
        ['get', 'status'],
        'active', '#22c55e',
        'inactive', '#ef4444',
        'pending', '#f59e0b',
        '#6b7280'
    ]
}

Результат:

Статус Цвет
active зелёный
inactive красный
pending оранжевый
другое серый

Градиентная окраска по числовому значению

Предположим, имеется показатель температуры.

{
    "temperature": 28
}

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

paint: {
    'circle-color': [
        'interpolate',
        ['linear'],
        ['get', 'temperature'],
        0, '#2563eb',
        15, '#22c55e',
        30, '#f59e0b',
        40, '#dc2626'
    ]
}

Цвет автоматически рассчитывается между контрольными точками.

Тематическое картографирование

Одно из главных применений circle-color — построение тематических карт.

Например, уровень загрязнения воздуха:

paint: {
    'circle-color': [
        'step',
        ['get', 'aqi'],
        '#22c55e',
        50, '#84cc16',
        100, '#facc15',
        150, '#f97316',
        200, '#dc2626'
    ]
}

Такое решение позволяет мгновенно определить проблемные области по цвету объектов.

Цвет в зависимости от масштаба

Менять можно не только размер, но и цвет.

paint: {
    'circle-color': [
        'interpolate',
        ['linear'],
        ['zoom'],
        5, '#60a5fa',
        10, '#2563eb',
        15, '#1d4ed8'
    ]
}

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

Совместное использование circle-radius и circle-color

Наиболее информативные визуализации обычно используют оба свойства одновременно.

map.addLayer({
    id: 'population-layer',
    type: 'circle',
    source: 'cities',
    paint: {
        'circle-radius': [
            'interpolate',
            ['linear'],
            ['get', 'population'],
            100000, 4,
            3000000, 25
        ],
        'circle-color': [
            'interpolate',
            ['linear'],
            ['get', 'populationDensity'],
            100, '#93c5fd',
            1000, '#2563eb',
            5000, '#1e3a8a'
        ]
    }
});

В этом случае:

  • размер показывает численность населения;
  • цвет показывает плотность населения.

Один объект одновременно передаёт несколько характеристик.

Производительность

Свойства circle-radius и circle-color оптимизированы для работы через графический процессор.

Даже сложные выражения обычно обрабатываются значительно быстрее, чем аналогичная реализация через DOM-элементы.

Рекомендуемые практики:

  • использовать GeoJSON Source или Vector Tiles;
  • избегать чрезмерно сложных вложенных выражений;
  • применять категоризацию (step) вместо большого количества условий;
  • ограничивать максимальный размер кругов;
  • использовать кластеризацию для очень больших наборов точек.

Динамическое изменение параметров

После создания слоя свойства могут изменяться программно.

Изменение радиуса:

map.setPaintProperty(
    'cities',
    'circle-radius',
    20
);

Изменение цвета:

map.setPaintProperty(
    'cities',
    'circle-color',
    '#dc2626'
);

Изменение через выражение:

map.setPaintProperty(
    'cities',
    'circle-color',
    [
        'match',
        ['get', 'type'],
        'capital', '#dc2626',
        'regional', '#2563eb',
        '#6b7280'
    ]
);

Типичные сценарии использования

Пузырьковые карты

'circle-radius': [
    'interpolate',
    ['linear'],
    ['get', 'value'],
    0, 3,
    1000, 30
]

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

Карты плотности объектов

'circle-color': [
    'interpolate',
    ['linear'],
    ['get', 'density'],
    0, '#dbeafe',
    100, '#1d4ed8'
]

Цвет отображает интенсивность явления.

Мониторинг датчиков

'circle-radius': 8,
'circle-color': [
    'match',
    ['get', 'state'],
    'normal', '#22c55e',
    'warning', '#f59e0b',
    'critical', '#dc2626',
    '#9ca3af'
]

Цвет мгновенно показывает состояние оборудования.

Отображение транспортных объектов

'circle-radius': [
    'match',
    ['get', 'vehicleType'],
    'bus', 6,
    'tram', 8,
    'train', 12,
    5
]
'circle-color': [
    'match',
    ['get', 'vehicleType'],
    'bus', '#2563eb',
    'tram', '#16a34a',
    'train', '#dc2626',
    '#6b7280'
]

Размер и цвет помогают быстро различать типы транспорта на карте.

Взаимодействие с другими свойствами круга

На практике circle-radius и circle-color редко используются изолированно. Обычно они комбинируются с дополнительными параметрами оформления:

paint: {
    'circle-radius': 12,
    'circle-color': '#2563eb',
    'circle-opacity': 0.7,
    'circle-stroke-width': 2,
    'circle-stroke-color': '#ffffff'
}

Такой стиль обеспечивает:

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

Свойства circle-radius и circle-color образуют основу визуального представления точечных данных в Mapbox GL JS. Через размер и цвет можно отображать количественные и категориальные характеристики объектов, строить тематические карты, пузырьковые диаграммы, системы мониторинга и высокопроизводительные геоинформационные интерфейсы, сохраняя при этом плавность отображения даже при работе с большими объёмами пространственных данных.

Оглавление