Polyline для рисования линий

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

Polyline создаётся на основе массива точек типа LatLng, каждая из которых задаёт вершину линии. Между последовательными точками автоматически строятся сегменты прямых линий на поверхности карты.

Базовое создание Polyline

Основой любой линии является объект google.maps.Polyline, принимающий конфигурацию через объект параметров.

const pathCoordinates = [
  { lat: 55.751244, lng: 37.618423 },
  { lat: 55.761244, lng: 37.628423 },
  { lat: 55.771244, lng: 37.638423 }
];

const polyline = new google.maps.Polyline({
  path: pathCoordinates,
  geodesic: true,
  strokeColor: "#2A5BD7",
  strokeOpacity: 1.0,
  strokeWeight: 4
});

polyline.setMap(map);

Ключевым параметром является path, содержащий массив координат. Метод setMap(map) связывает линию с конкретной картой.

Структура параметров Polyline

Polyline конфигурируется через объект PolylineOptions, который включает визуальные и геометрические настройки.

Основные свойства:

  • path — массив координат линии
  • strokeColor — цвет линии в формате HEX или CSS
  • strokeOpacity — прозрачность линии от 0.0 до 1.0
  • strokeWeight — толщина линии в пикселях
  • geodesic — построение линии по геодезической траектории
  • map — карта, на которой отображается объект

Геодезические линии

При включении geodesic: true сегменты линии следуют кривизне поверхности Земли. Это особенно заметно на больших расстояниях между точками.

const flightPath = new google.maps.Polyline({
  path: [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 51.5074, lng: -0.1278 }
  ],
  geodesic: true,
  strokeColor: "#FF0000",
  strokeWeight: 2
});

flightPath.setMap(map);

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

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

Массив координат может изменяться после создания объекта. Для управления используется метод setPath.

const polyline = new google.maps.Polyline({
  path: [],
  strokeColor: "#00AA00",
  strokeWeight: 3
});

polyline.setMap(map);

polyline.setPath([
  { lat: 55.75, lng: 37.61 },
  { lat: 55.76, lng: 37.62 }
]);

Также доступен объект MVCArray, позволяющий отслеживать изменения в реальном времени.

const path = polyline.getPath();
path.push(new google.maps.LatLng(55.77, 37.63));

Работа с MVCArray

getPath() возвращает объект MVCArray, представляющий реактивный массив координат. Изменения массива автоматически обновляют линию на карте.

Основные операции:

const path = polyline.getPath();

// добавление точки
path.push(new google.maps.LatLng(55.78, 37.64));

// вставка точки
path.insertAt(0, new google.maps.LatLng(55.70, 37.60));

// удаление точки
path.removeAt(1);

Стилизация линии

Внешний вид Polyline определяется несколькими параметрами, влияющими на визуальное восприятие слоя.

Цвет и прозрачность

strokeColor: "#4285F4",
strokeOpacity: 0.8

Толщина

strokeWeight: 6

Пунктирная линия

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

const lineSymbol = {
  path: "M 0,-1 0,1",
  strokeOpacity: 1,
  scale: 2
};

const polyline = new google.maps.Polyline({
  path: pathCoordinates,
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: "0",
    repeat: "20px"
  }],
  map: map
});

Иконки вдоль линии

Polyline поддерживает размещение повторяющихся или единичных иконок вдоль траектории.

icons: [
  {
    icon: {
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      scale: 3,
      strokeColor: "#000"
    },
    offset: "50%"
  }
]

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

События Polyline

Polyline поддерживает взаимодействие через события карты.

polyline.addListener("click", (event) => {
  console.log(event.latLng.lat(), event.latLng.lng());
});

Доступные события:

  • click
  • mouseover
  • mouseout
  • rightclick

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

Редактируемые линии

Polyline может быть сделан редактируемым при включении параметра editable.

const polyline = new google.maps.Polyline({
  path: pathCoordinates,
  editable: true,
  draggable: true,
  map: map
});

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

Удаление Polyline с карты

Удаление линии выполняется через привязку к null.

polyline.setMap(null);

При этом объект остаётся в памяти, но перестаёт отображаться.

Оптимизация большого количества линий

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

Ключевые аспекты:

  • минимизация количества точек в path
  • использование упрощённых геометрий
  • отключение лишних интерактивных событий
  • группировка линий при помощи общих слоёв

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

Кодирование путей (Encoded Polyline)

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

const encodedPath = "}_p~F~ps|U_ulLnnqC_mqNvxq`@";

const polyline = new google.maps.Polyline({
  path: google.maps.geometry.encoding.decodePath(encodedPath),
  map: map
});

Модуль geometry.encoding преобразует строку обратно в массив координат.

Сложные маршруты и комбинирование линий

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

const segment1 = new google.maps.Polyline({
  path: pathA,
  strokeColor: "#FF0000",
  map: map
});

const segment2 = new google.maps.Polyline({
  path: pathB,
  strokeColor: "#0000FF",
  map: map
});

Такой подход применяется для визуализации разных типов дорог, транспортных слоёв или этапов маршрута.

Использование координат из пользовательских данных

Polyline часто строится на основе внешних источников данных, включая GPS-треки, API маршрутизации или ручной ввод координат.

Формат данных обычно соответствует структуре:

const track = gpsData.map(point => ({
  lat: point.latitude,
  lng: point.longitude
}));

После преобразования массив напрямую передаётся в path.

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

Polyline автоматически адаптируется к масштабу карты. При изменении zoom:

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

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

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

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

  • Marker
  • Polygon
  • Circle
  • Rectangle

Приоритет отображения определяется порядком добавления на карту и внутренними слоями рендеринга.

Изменение стиля в реальном времени

Свойства Polyline могут изменяться после создания объекта без его пересоздания.

polyline.setOptions({
  strokeColor: "#00FF00",
  strokeWeight: 5
});

Динамическое обновление применяется в системах мониторинга маршрутов и трекинга движения.

Оглавление