Leaflet представляет объектно-ориентированную модель работы с геометрическими слоями, где каждый тип примитивной геометрии инкапсулирован в отдельный класс. Класс Circle используется для отображения окружностей на карте в географических координатах и является частным случаем векторного слоя, наследующего базовую функциональность от Layer и Path.
Круг в Leaflet задаётся как геометрическая фигура с центром в координатах широты и долготы и радиусом в метрах. В отличие от HTML Canvas или SVG в абстрактном виде, Circle привязан к картографической проекции, поэтому его размер на экране динамически изменяется в зависимости от масштаба карты.
Circle определяется тремя ключевыми параметрами: центр, радиус и набор визуальных опций. Центр задаётся объектом LatLng, радиус — числом в метрах. Это принципиально отличает Circle от пиксельных примитивов.
При изменении масштаба карты радиус пересчитывается в экранные пиксели, что обеспечивает географическую корректность отображения. Это означает, что круг всегда соответствует фиксированному расстоянию на поверхности Земли, а не фиксированному размеру на экране.
Класс Circle оптимизирован для отображения зон покрытия, радиусов поиска, областей влияния и других пространственных измерений, где критична метрическая точность.
Circle создаётся через фабричный метод слоя карты:
L.circle(latlng, options).addTo(map);или через явный конструктор:
const circle = new L.Circle([55.751244, 37.618423], {
radius: 1000
}).addTo(map);Первый аргумент — координаты центра. Второй — объект параметров, содержащий радиус и стилизацию.
Circle поддерживает расширенный набор опций, унаследованных от Path:
Пример комплексной конфигурации:
L.circle([55.75, 37.61], {
radius: 2000,
color: '#3388ff',
weight: 2,
fillColor: '#3388ff',
fillOpacity: 0.2
}).addTo(map);Внутренне Circle использует PathRenderer (SVG или Canvas в зависимости от окружения), что влияет на производительность при большом количестве объектов.
Circle расширяет функциональность базового Path и добавляет специализированные методы работы с радиусом.
Изменяет радиус окружности:
circle.setRadius(5000);После вызова происходит автоматический перерасчёт геометрии и перерисовка слоя.
Возвращает текущий радиус в метрах:
const r = circle.getRadius();Работа с центром окружности:
circle.setLatLng([55.76, 37.64]);
const center = circle.getLatLng();При изменении центра сохраняется текущий радиус.
Позволяет динамически обновлять визуальные параметры:
circle.setStyle({
color: 'red',
fillOpacity: 0.5
});Метод не влияет на геометрию, только на отображение.
Управление z-index внутри слоя:
circle.bringToFront();Используется при перекрытии нескольких геометрических объектов.
Circle поддерживает полный набор событий Leaflet, унаследованных от Layer:
Пример обработки события:
circle.on('click', function (e) {
console.log('Клик по окружности', e.latlng);
});События передают координаты точки взаимодействия и объект слоя.
В Leaflet существует два визуально похожих класса: Circle и CircleMarker, но их поведение принципиально различается.
Circle
CircleMarker
L.circleMarker([55.75, 37.61], { radius: 10 }).addTo(map);
L.circle([55.75, 37.61], { radius: 1000 }).addTo(map);Первый остаётся фиксированным на экране, второй сохраняет географическую корректность.
Circle реализуется через Path-абстракцию, которая преобразует географические координаты в экранные пиксели с использованием проекции карты. При каждом изменении масштаба выполняется пересчёт радиуса в пиксели.
Если используется SVG-рендерер, Circle представляется элементом
<path>, описывающим окружность через SVG-дуги. При
Canvas-рендеринге используется API отрисовки 2D-контекста.
Производительность Circle зависит от:
Circle интегрируется с системой слоёв Leaflet и участвует в общей системе трансформации координат.
Он поддерживает методы:
а также геометрические вычисления через LatLngBounds:
const bounds = circle.getBounds();Bounds рассчитывается как минимальный прямоугольник, описывающий окружность.
Circle часто применяется для:
При этом геометрическая точность обеспечивается переводом радиуса из метров в координатную систему WGS84 с учётом проекции карты.
Circle может комбинироваться с:
Он поддерживает наложение, прозрачность и порядок отрисовки, что позволяет строить сложные визуальные сцены.
При увеличении числа Circle на карте возрастает нагрузка на пересчёт геометрии. Векторный рендеринг SVG может становиться узким местом, тогда как Canvas-режим обеспечивает более стабильную отрисовку.
Оптимизация достигается через: