Класс Path

Класс L.Path является базовым абстрактным уровнем для всех векторных слоёв в Leaflet. Он не используется напрямую для создания объектов карты, но определяет общую модель поведения и набор возможностей для геометрических примитивов: линий, многоугольников, окружностей, прямоугольников и их производных.

Внутри архитектуры Leaflet векторные объекты выстроены в иерархию, где L.Path выступает промежуточным слоем между базовым классом L.Layer и конкретными геометрическими реализациями.

Основные задачи L.Path:

• управление визуальным представлением геометрии;
• обработка стилевых параметров отрисовки;
• интеграция с SVG и Canvas-рендерерами;
• обработка интерактивных событий (мышь, касания);
• поддержка динамического обновления геометрии.

L.Path не хранит конкретную геометрию как самостоятельную сущность, а оперирует абстрактным набором координат, предоставляемых наследниками.

Общие опции конфигурации Path

Все наследники L.Path принимают единый набор опций, определяющих визуальное представление векторных объектов.

Основные параметры обводки

• stroke — включает или отключает обводку;
• color — цвет линии;
• weight — толщина линии в пикселях;
• opacity — прозрачность линии;
• lineCap — форма концов линии (butt, round, square);
• lineJoin — соединение сегментов (round, bevel, miter);
• dashArray — штриховой рисунок линии;
• dashOffset — смещение штрихов.

Параметры заливки

• fill — включает заливку внутренней области;
• fillColor — цвет заливки;
• fillOpacity — прозрачность заливки;
• fillRule — правило заполнения (evenodd или nonzero).

Общие визуальные параметры

• className — CSS-класс для кастомной стилизации;
• interactive — включение событий мыши;
• pane — слой отображения на карте.

Эти параметры передаются вниз по иерархии и интерпретируются конкретным рендерером.

Внутреннее устройство и жизненный цикл

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

1. создание экземпляра с набором координат;
2. добавление слоя на карту;
3. генерация геометрии в формате, подходящем для рендерера;
4. построение SVG/Canvas-элемента;
5. обновление при изменении координат или стиля;
6. удаление из DOM или Canvas-контекста.

При изменении координат вызывается пересчёт геометрии и повторная отрисовка без пересоздания всего слоя.

Методы класса L.Path

Управление стилем

setStyle(styleObject) Обновляет параметры визуального отображения без пересоздания объекта.

Типичный набор свойств:

• цветовые параметры;
• толщина линий;
• параметры заливки;
• штриховка.

При вызове происходит частичное обновление SVG или Canvas представления.

Управление отображением

bringToFront() Перемещает слой поверх других в своём pane.

bringToBack() Перемещает слой под остальные элементы.

Эти методы влияют на порядок DOM-элементов или порядок отрисовки в Canvas.

Перерисовка

redraw() Инициирует полную перерисовку геометрии.

Используется при изменении состояния, не связанного напрямую с координатами (например, изменение DPI, масштабирование контейнера, внешние трансформации).

Управление геометрией

В базовом L.Path геометрия не задаётся напрямую, но наследники реализуют методы изменения координат. После изменения вызывается пересчёт через redraw().

Обновление состояния

**_update()** (внутренний метод) Отвечает за синхронизацию визуального представления с текущими данными геометрии и стилями.

Рендеринг: SVG и Canvas

Leaflet поддерживает два механизма отрисовки векторных объектов:

SVG-рендеринг

SVG является стандартным режимом:

• каждый Path становится DOM-элементом <path>;
• стили применяются через SVG attributes;
• высокая точность масштабирования;
• удобная интеграция с CSS.

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

Canvas-рендеринг

Canvas-режим активируется при больших объёмах данных:

• все Path рисуются в одном canvas-контексте;
• отсутствуют отдельные DOM-узлы;
• повышенная производительность при тысячах объектов;
• ограниченная возможность стилизации через CSS.

Выбор рендерера определяется классами L.SVG и L.Canvas, которые реализуют единый интерфейс для L.Path.

Событийная модель Path

L.Path расширяет базовую систему событий L.Layer, добавляя интерактивность для векторных объектов.

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

• click
• dblclick
• mousedown
• mouseup
• mouseover
• mouseout
• mousemove
• contextmenu

При включённой опции interactive: true Path участвует в hit-testing — определении попадания курсора в геометрию.

Для SVG используется встроенная обработка событий DOM, для Canvas применяется математическая проверка попадания в контур.

Наследники L.Path

Класс служит основой для большинства векторных объектов Leaflet.

Polyline

Ломаная линия, представляющая последовательность координат:

• используется для маршрутов;
• поддерживает массив LatLng;
• наследует стили обводки.

Polygon

Замкнутый многоугольник:

• автоматически замыкает контур;
• поддерживает заливку;
• может содержать «дыры» (holes).

Rectangle

Частный случай Polygon:

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

Circle

Геометрия окружности:

• определяется центром и радиусом;
• радиус пересчитывается в пиксели при масштабировании карты;
• визуально реализуется как SVG path.

CircleMarker

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

Стилизация через CSS и className

Параметр className позволяет подключать внешние стили к SVG-элементам.

В SVG-режиме каждый Path получает соответствующий DOM-элемент:

• можно переопределять stroke, fill через CSS;
• поддерживаются псевдоклассы hover/active;
• возможно динамическое изменение через классы.

Canvas-режим игнорирует CSS-стили, поскольку вся отрисовка происходит программно.

Геометрические преобразования

При каждом изменении масштаба карты Path проходит перерасчёт координат:

• географические координаты (LatLng) преобразуются в пиксельные;
• учитывается текущий zoom level;
• применяется проекция карты (обычно Web Mercator).

Этот процесс выполняется через внутренние методы преобразования latLngToLayerPoint.

Производительность и оптимизация

Работа с L.Path становится критичной при большом количестве объектов.

Ключевые факторы влияния:

• количество сегментов геометрии;
• использование SVG или Canvas;
• частота вызовов redraw;
• включённая интерактивность;
• сложность стилей (штриховка, прозрачности).

Canvas снижает нагрузку на DOM, но увеличивает нагрузку на CPU при перерисовке. SVG, наоборот, создаёт больше DOM-узлов, но облегчает частичное обновление отдельных объектов.

Внутренние взаимодействия с Layer системой

L.Path наследует поведение L.Layer, включая:

• привязку к карте через addTo(map);
• управление pane-слоями;
• связывание всплывающих окон и tooltip;
• удаление через remove().

При добавлении на карту Path регистрируется в соответствующем рендерере, после чего становится частью глобального слоя отрисовки.

Обновление при изменении состояния карты

Path автоматически реагирует на изменения карты:

• zoom;
• pan;
• resize контейнера.

Каждое изменение триггерит пересчёт координат и обновление геометрии без необходимости ручного вмешательства.