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

Векторные объекты в Leaflet (полилинии, полигоны, окружности, GeoJSON-геометрии) используют единый набор параметров стилизации, основанный на концепции Path options. Эти параметры применяются ко всем классам, наследующимся от L.Path, включая L.Polyline, L.Polygon, L.Circle, L.GeoJSON.

Ключевая особенность модели заключается в том, что стиль задаётся либо при создании слоя, либо динамически через метод setStyle, либо через функцию стиля для наборов данных.

Базовые параметры обводки

Основу визуального представления векторных объектов формирует контур (stroke). За него отвечают следующие параметры:

color Определяет цвет линии или границы полигона.

L.polyline(latlngs, {
  color: '#3388ff'
});

Используется любой валидный CSS-формат: hex, rgb, rgba, именованные цвета.

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

{
  weight: 5
}

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

opacity Прозрачность обводки в диапазоне от 0 до 1.

{
  opacity: 0.7
}

Используется для визуальной интеграции слоёв с подложкой.

lineCap Определяет форму концов линии:

  • butt — обрезанные
  • round — округлые
  • square — квадратные выступающие
{
  lineCap: 'round'
}

lineJoin Определяет форму соединений сегментов:

  • round — сглаженные углы
  • bevel — срезанные углы
  • miter — острые углы
{
  lineJoin: 'miter'
}

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

Для полигонов и окружностей доступна внутренняя заливка.

fill Включает или отключает заливку.

{
  fill: true
}

При false отображается только контур.

fillColor Цвет заливки. Если не задан, используется color.

{
  fillColor: '#ff7800'
}

fillOpacity Прозрачность заливки.

{
  fillOpacity: 0.4
}

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

Пунктирные и декоративные линии

dashArray Определяет шаблон штриховки линии.

{
  dashArray: '10, 5'
}
  • первое значение — длина штриха
  • второе — пробел
  • последовательность повторяется

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

dashOffset Смещение штриховки вдоль линии.

{
  dashOffset: '20'
}

Позволяет анимировать движение линии или синхронизировать стиль с другими слоями.

Интерактивность и поведение

interactive Определяет, реагирует ли объект на события мыши.

{
  interactive: true
}

При false слой не участвует в событиях click, mouseover, mouseout.

className CSS-класс для SVG-элемента.

{
  className: 'custom-vector-layer'
}

Используется для глубокой кастомизации через CSS:

.custom-vector-layer {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

Параметры отображения и рендеринга

stroke Включает или отключает отрисовку контура.

{
  stroke: true
}

При false линия полностью скрывается, даже если задан color.

pane Определяет слой (pane), в котором рисуется объект.

{
  pane: 'overlayPane'
}

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

renderer Выбор механизма рендеринга:

  • L.svg() — SVG-рендерер (по умолчанию)
  • L.canvas() — Canvas-рендерер
{
  renderer: L.canvas()
}

Canvas предпочтителен при большом количестве объектов, SVG — при необходимости DOM-интерактивности.

Динамическое изменение стиля

После создания слоя стиль можно изменять без пересоздания объекта.

const line = L.polyline(latlngs, { color: 'blue', weight: 3 });

line.setStyle({
  color: 'red',
  weight: 6
});

Метод setStyle работает для всех L.Path-объектов и применяется к уже отрисованной геометрии.

Функция стиля для GeoJSON

Для сложных наборов данных используется функция, возвращающая объект стилей.

L.geoJSON(data, {
  style: function (feature) {
    return {
      color: feature.properties.color,
      weight: feature.properties.weight,
      fillColor: feature.properties.fill,
      fillOpacity: 0.5
    };
  }
});

Такой подход позволяет:

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

Наследование и переопределение параметров

Векторные слои используют систему наследования стилей:

  1. глобальные настройки слоя
  2. стиль функции GeoJSON
  3. локальные изменения через setStyle

При конфликте приоритет получает наиболее специфичный уровень.

Стилизация окружностей и кругов

L.Circle и L.CircleMarker наследуют все Path options, но имеют особенности:

  • у Circle радиус задаётся в метрах
  • у CircleMarker радиус фиксирован в пикселях
L.circle([51.5, -0.1], {
  radius: 500,
  color: 'blue',
  fillColor: '#30f',
  fillOpacity: 0.3
});

Оптимизация визуальной нагрузки

При большом количестве векторных объектов ключевую роль играет баланс параметров:

  • уменьшение weight снижает визуальную перегрузку
  • использование opacity вместо изменения цвета упрощает восприятие слоёв
  • переход на Canvas уменьшает нагрузку на DOM
  • отключение interactive для фоновых слоёв ускоряет обработку событий

CSS-кастомизация SVG-слоёв

Leaflet генерирует SVG-элементы, которые можно стилизовать через CSS, используя className:

{
  className: 'roads-layer'
}
.roads-layer path {
  stroke-dasharray: 8 4;
  stroke-width: 2;
}

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

Сочетание параметров в сложных стилях

Комбинации параметров позволяют создавать сложные визуальные эффекты:

  • полупрозрачные полигоны с яркой обводкой
  • пунктирные маршруты с анимацией смещения
  • градиентные визуальные слои через несколько перекрывающихся объектов
  • тематические карты на основе GeoJSON-атрибутов
{
  color: '#1f78b4',
  weight: 2,
  opacity: 0.9,
  fillColor: '#a6cee3',
  fillOpacity: 0.4,
  dashArray: '4 6',
  lineJoin: 'round'
}

Взаимодействие стилей с событиями

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

function highlight(e) {
  e.target.setStyle({
    weight: 5,
    color: '#666'
  });
}

function reset(e) {
  geojson.resetStyle(e.target);
}

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

Оглавление