Circle слой

Слой circle в MapLibre GL JS используется для визуализации точечных данных в виде окружностей на карте. Он предназначен для отображения объектов, представленных геометрией типа Point и MultiPoint, и является одним из базовых инструментов стилизации GeoJSON-источников.

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

Структура и подключение слоя

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

map.addSource('points', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [69.2401, 41.2995]
        },
        properties: {
          magnitude: 5
        }
      }
    ]
  }
});

map.addLayer({
  id: 'circle-layer',
  type: 'circle',
  source: 'points'
});

Источник данных должен содержать геометрию точек. Любая не-точечная геометрия игнорируется.

Базовые свойства стилизации

circle-radius

Определяет радиус окружности в пикселях. Поддерживает интерполяцию и выражения.

'circle-radius': 10

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

'circle-radius': [
  'interpolate',
  ['linear'],
  ['get', 'magnitude'],
  1, 4,
  10, 20
]

circle-color

Определяет цвет заливки круга. Поддерживает любые CSS-подобные цветовые значения и выражения.

'circle-color': '#ff5722'

Пример условной окраски:

'circle-color': [
  'case',
  ['>', ['get', 'magnitude'], 5],
  '#e53935',
  '#1e88e5'
]

circle-opacity

Контролирует прозрачность слоя в диапазоне от 0 до 1.

'circle-opacity': 0.7

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

Обводка окружностей

circle-stroke-color

Цвет обводки круга, визуально отделяющий объекты от фона и друг от друга.

'circle-stroke-color': '#000000'

circle-stroke-width

Толщина обводки в пикселях.

'circle-stroke-width': 2

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

Геометрические трансформации

circle-blur

Размытие окружности. Значения ближе к 1 создают эффект свечения.

'circle-blur': 0.3

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

circle-translate

Смещение круга относительно координат точки.

'circle-translate': [10, 5]

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

circle-translate-anchor

Определяет систему координат смещения:

  • map — смещение относительно карты
  • viewport — смещение относительно экрана
'circle-translate-anchor': 'viewport'

Поведение при наклоне карты

circle-pitch-scale

Определяет изменение размера кругов при наклоне карты:

  • map — размер сохраняется в пространстве карты
  • viewport — сохраняется в экранных пикселях
'circle-pitch-scale': 'map'

circle-pitch-alignment

Управляет выравниванием при наклоне:

  • map — следует географической плоскости
  • viewport — фиксируется относительно экрана
'circle-pitch-alignment': 'viewport'

Работа с выражениями

Circle-слой поддерживает полноценную систему выражений MapLibre GL JS. Это позволяет строить динамическую визуализацию на основе данных.

Пример зависимости от масштаба

'circle-radius': [
  'interpolate',
  ['exponential', 1.5],
  ['zoom'],
  5, 2,
  15, 20
]

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

Пример фильтрации данных

Фильтрация объектов выполняется через filter в описании слоя.

filter: ['>', ['get', 'population'], 1000]

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

Поведение при перекрытии

При высокой плотности данных круги могут перекрывать друг друга. Управление визуальной иерархией осуществляется через:

  • порядок слоёв (addLayer порядок)
  • прозрачность
  • радиус в зависимости от масштаба
  • stroke-обводку

Дополнительно применяется clustering на уровне источника GeoJSON:

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

Интерактивность

Circle-слои часто используются в связке с событиями карты.

map.on('click', 'circle-layer', (e) => {
  const feature = e.features[0];
});

Поддерживаемые события:

  • click
  • mouseenter
  • mouseleave
  • mousemove

Для активации событий требуется включение interactive layers.

Данные и производительность

Circle-слои относятся к наиболее производительным типам визуализации, так как используют простую геометрию и GPU-ускоренную отрисовку.

Факторы влияния на производительность:

  • количество точек
  • использование сложных выражений
  • наличие кластеризации
  • частота обновления источника

При работе с большими массивами данных оптимизация достигается через:

  • кластеризацию
  • тайловые источники (vector tiles)
  • ограничение zoom-диапазонов слоя
minzoom: 3,
maxzoom: 14

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

Точечные события

Отображение географических событий с интенсивностью через радиус и цвет.

Аналитические карты

Визуализация распределений значений через градиенты и масштабируемые круги.

Мониторинг объектов

Динамическое обновление координат с переотрисовкой слоя.

Ограничения модели circle

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

Эти ограничения компенсируются комбинацией с другими слоями, такими как symbol, heatmap и fill.

Оглавление