Класс Polyline

Назначение и роль Polyline

Класс Polyline в библиотеке Leaflet предназначен для отображения ломаных линий на интерактивной карте. Ломаная линия представляет собой последовательность географических точек, соединённых отрезками прямых. Этот объект используется для визуализации маршрутов, дорог, троп, границ, траекторий движения и любых других линейных геоданных.

Polyline является расширением базового класса Path и наследует его свойства и методы, включая стилизацию, обработку событий и возможность динамического обновления координат.

Создание Polyline

Базовая инициализация выполняется через конструктор L.polyline, которому передаётся массив координат:

const latlngs = [
    [55.751244, 37.618423],
    [55.760186, 37.618711],
    [55.765123, 37.625789]
];

const polyline = L.polyline(latlngs);
polyline.addTo(map);

Каждый элемент массива представляет собой пару [latitude, longitude]. Порядок точек критически важен, так как именно он определяет форму линии.

Polyline можно также создавать с объектом опций:

const polyline = L.polyline(latlngs, {
    color: 'blue',
    weight: 4,
    opacity: 0.7,
    smoothFactor: 1.0
});

Структура координат

Polyline поддерживает несколько форматов входных данных:

Простые координаты

[[lat, lng], [lat, lng]]

Объекты LatLng

[
    L.latLng(55.75, 37.61),
    L.latLng(55.76, 37.62)
]

Вложенные массивы (для мультилиний)

Хотя Polyline сам по себе не является MultiPolyline, библиотека допускает вложенность массивов:

[
    [[55.75, 37.61], [55.76, 37.62]],
    [[55.77, 37.63], [55.78, 37.64]]
]

Основные опции Polyline

Polyline наследует опции Path, поэтому доступен широкий набор параметров.

Визуальные параметры

color Определяет цвет линии:

color: 'red'

weight Толщина линии в пикселях:

weight: 3

opacity Прозрачность линии (0–1):

opacity: 0.5

lineCap Форма концов линии:

  • round
  • square
  • butt

lineJoin Способ соединения сегментов:

  • round
  • bevel
  • miter

Геометрические параметры

smoothFactor Коэффициент упрощения геометрии при отображении:

smoothFactor: 1.0

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

Поведение интерактивности

noClip Отключает обрезку линии по границам карты:

noClip: true

Добавление и удаление Polyline на карту

Polyline является слоем (Layer) и поддерживает стандартный интерфейс управления слоями.

Добавление

polyline.addTo(map);

или

map.addLayer(polyline);

Удаление

map.removeLayer(polyline);

Изменение координат Polyline

Polyline можно динамически обновлять:

Полная замена набора точек

polyline.setLatLngs([
    [55.70, 37.60],
    [55.71, 37.61]
]);

Получение текущих координат

const coords = polyline.getLatLngs();

Работа с геометрией

Polyline предоставляет методы для анализа структуры линии.

Получение длины

const length = polyline.getLength();

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

Поиск ближайшей точки

const closest = polyline.closestLayerPoint(L.point(100, 100));

Возвращает ближайшую точку на линии относительно пиксельной координаты.

События Polyline

Polyline поддерживает стандартные события интерактивности:

click

polyline.on('click', function (e) {
    console.log('Polyline clicked');
});

mouseover

polyline.on('mouseover', function () {
    polyline.setStyle({ color: 'green' });
});

mouseout

polyline.on('mouseout', function () {
    polyline.setStyle({ color: 'blue' });
});

contextmenu

polyline.on('contextmenu', function () {
    console.log('Right click on polyline');
});

Изменение стиля через setStyle

Polyline можно стилизовать динамически:

polyline.setStyle({
    color: 'black',
    weight: 6,
    opacity: 0.9
});

Метод применяется без пересоздания объекта, что позволяет эффективно обновлять визуализацию.

Интерактивные методы

bringToFront / bringToBack

Управляют порядком наложения слоёв:

polyline.bringToFront();
polyline.bringToBack();

setLatLngs и редактирование маршрутов

Polyline часто используется в системах построения маршрутов. Обновление точек позволяет реализовать интерактивное редактирование:

polyline.setLatLngs(updatedRoute);

Геодезические особенности

Polyline в Leaflet учитывает особенности картографической проекции Web Mercator. Это означает:

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

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

Использование в маршрутизации

Polyline широко применяется в системах построения маршрутов:

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

Пример интеграции с внешними данными:

fetch('/route')
    .then(res => res.json())
    .then(data => {
        const routeLine = L.polyline(data.coordinates, {
            color: 'purple',
            weight: 5
        }).addTo(map);
    });

Оптимизация отображения

При работе с большим количеством точек Polyline может становиться тяжёлым для рендеринга.

Используются следующие подходы:

  • увеличение smoothFactor;
  • упрощение геометрии на сервере;
  • сегментация линии на части;
  • отключение интерактивности (interactive: false).

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

Polyline может комбинироваться с другими объектами:

  • Markers — обозначение узлов маршрута;
  • Polygons — выделение зон вдоль линии;
  • Circles — отображение радиусов влияния;
  • GeoJSON layers — комплексные геоданные.

Polyline и GeoJSON

Polyline поддерживает создание из GeoJSON:

const geojson = {
    "type": "LineString",
    "coordinates": [
        [37.618423, 55.751244],
        [37.625789, 55.765123]
    ]
};

const layer = L.geoJSON(geojson);
layer.addTo(map);

Важно учитывать порядок координат GeoJSON: [longitude, latitude], в отличие от стандартного Leaflet формата.

Особенности производительности

Polyline остаётся одним из наиболее лёгких в рендеринге векторных объектов, однако его производительность зависит от:

  • количества точек;
  • частоты обновления;
  • наличия анимаций;
  • уровня масштабирования карты.

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

Наследование и внутренняя архитектура

Polyline наследуется по цепочке:

Layer → Interactive layer → Path → Polyline

Это обеспечивает доступ к:

  • событийной модели Leaflet;
  • SVG/VML рендерингу;
  • методам стилизации Path;
  • геометрическим операциям.

Polyline не является самостоятельным рендерером, а лишь специализацией Path для линейной геометрии.

Оглавление