Настройка стиля линий

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

Основной объект, отвечающий за отрисовку линии, — Polyline. Его визуальное поведение задаётся через свойство strokeOptions, включающее три ключевых параметра:

  • strokeColor — цвет линии в формате HEX или CSS-совместимом значении
  • strokeOpacity — прозрачность от 0.0 до 1.0
  • strokeWeight — толщина линии в пикселях
const line = new google.maps.Polyline({
  path: [
    { lat: 43.2389, lng: 76.8897 },
    { lat: 43.2565, lng: 76.9286 }
  ],
  strokeColor: "#1a73e8",
  strokeOpacity: 1.0,
  strokeWeight: 4,
  map: map
});

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

Управление прозрачностью и визуальной иерархией

Прозрачность линии используется для построения визуальной иерархии слоёв. Чем ниже значение strokeOpacity, тем сильнее линия интегрируется в фон карты, не перекрывая базовые тайлы.

Комбинация толщины и прозрачности позволяет создавать различные уровни значимости маршрутов:

strokeOpacity: 0.3,
strokeWeight: 8

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

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

Параметр geodesic изменяет способ интерполяции линии между точками. При значении true линия строится по кратчайшему пути на поверхности сферы, а не по прямой проекции на карту.

const geodesicLine = new google.maps.Polyline({
  path: pathCoordinates,
  geodesic: true,
  strokeColor: "#34a853",
  strokeWeight: 3,
  map: map
});

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

Пунктирные и кастомные линии

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

Базовый пунктир

const dashedLine = new google.maps.Polyline({
  path: pathCoordinates,
  strokeOpacity: 0,
  icons: [{
    icon: {
      path: 'M 0,-1 0,1',
      strokeOpacity: 1,
      scale: 4
    },
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Здесь ключевую роль играет:

  • strokeOpacity: 0 — скрывает основную линию
  • icons — задаёт визуальные сегменты
  • repeat — определяет шаг повторения символа

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

Символы позволяют создавать более сложные визуальные эффекты: стрелки, точки, направленные маркеры. Они определяются через SymbolPath или кастомный SVG-путь.

Стрелочная линия

const arrowSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
  scale: 3,
  strokeColor: "#000000"
};

const arrowLine = new google.maps.Polyline({
  path: pathCoordinates,
  icons: [{
    icon: arrowSymbol,
    offset: '100%',
    repeat: '50px'
  }],
  strokeOpacity: 0,
  map: map
});

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

Управление линиями через SVG-подобные пути

Для максимальной кастомизации используется SVG path syntax. Это позволяет создавать уникальные маркеры и визуальные паттерны:

const customSymbol = {
  path: 'M 0 0 L 10 0 L 5 10 z',
  fillColor: "#ff0000",
  fillOpacity: 1,
  scale: 1
};

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

Полилинии с динамическим стилем

Стили линий могут изменяться в рантайме через методы setOptions и setPath. Это позволяет создавать интерактивные карты, реагирующие на действия пользователя.

line.setOptions({
  strokeColor: "#e91e63",
  strokeWeight: 6
});

Изменение параметров применяется мгновенно без необходимости пересоздания объекта.

Сегментация линий по стилям

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

new google.maps.Polyline({
  path: segment1,
  strokeColor: "#4285f4",
  strokeWeight: 4,
  map: map
});

new google.maps.Polyline({
  path: segment2,
  strokeColor: "#ea4335",
  strokeWeight: 4,
  map: map
});

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

Полигоны и наследование стиля линий

Полигоны используют аналогичную модель стилизации для границ через strokeOptions. Отличие заключается в наличии внутренней заливки:

const polygon = new google.maps.Polygon({
  paths: coordinates,
  strokeColor: "#0000ff",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#0000ff",
  fillOpacity: 0.2,
  map: map
});

Граница полигона наследует те же принципы визуализации, что и Polyline, включая прозрачность, толщину и цвет.

Производительность при сложных стилях

Сложные стили линий, особенно с большим количеством символов, влияют на производительность рендеринга. Наиболее ресурсоёмкими являются:

  • частое повторение icons
  • большое количество сегментов Polyline
  • динамическое обновление path на каждом кадре

Оптимизация достигается за счёт:

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

Приоритеты отображения и слои

Линии участвуют в системе слоёв карты. Порядок отображения определяется порядком добавления на карту и параметром zIndex:

const priorityLine = new google.maps.Polyline({
  path: pathCoordinates,
  strokeColor: "#000",
  strokeWeight: 5,
  zIndex: 1000,
  map: map
});

Линии с более высоким zIndex перекрывают другие графические элементы, включая полигоны и маркеры.

Интерактивные состояния линий

Стили линий часто изменяются в ответ на события:

  • hover (наведение курсора)
  • click (выделение маршрута)
  • selection (активный слой)
line.addListener("mouseover", () => {
  line.setOptions({ strokeWeight: 8 });
});

line.addListener("mouseout", () => {
  line.setOptions({ strokeWeight: 4 });
});

Такая модель позволяет реализовать поведение, близкое к UI-компонентам, где линия становится интерактивным элементом интерфейса карты.

Оглавление