Параметр style

В библиотеке Leaflet параметр style используется для задания визуального оформления векторных слоёв, прежде всего GeoJSON-объектов и всех классов, основанных на Path (полилинии, полигоны, окружности и их производные). Он определяет внешний вид геометрии при отрисовке в SVG- или Canvas-рендерере и управляет набором графических свойств, влияющих на отображение линий, заливок и границ.

Базовая структура объекта стиля

Объект, передаваемый в style, представляет собой набор ключей, соответствующих визуальным параметрам:

  • color — цвет линии (обводки)
  • weight — толщина линии в пикселях
  • opacity — прозрачность линии (0–1)
  • fillColor — цвет заливки (для полигонов и окружностей)
  • fillOpacity — прозрачность заливки
  • fill — включение/выключение заливки
  • dashArray — пунктирный стиль линии
  • lineCap — форма концов линии (butt, round, square)
  • lineJoin — тип соединения сегментов (miter, round, bevel)
  • interactive — включение интерактивности слоя

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

Применение style в L.geoJSON

Основной сценарий использования параметра style связан с загрузкой GeoJSON-данных. При создании слоя через L.geoJSON можно задать единый стиль для всех объектов:

L.geoJSON(geojsonData, {
  style: {
    color: "#3388ff",
    weight: 3,
    opacity: 1,
    fillColor: "#3388ff",
    fillOpacity: 0.2
  }
}).addTo(map);

В этом случае каждый полигон и линия в наборе данных будет отрисован с одинаковыми параметрами.

Функциональный style и динамическая стилизация

Наиболее гибкий вариант — передача функции вместо объекта. Функция получает feature и возвращает объект стиля, что позволяет применять условное форматирование на основе свойств данных.

L.geoJSON(geojsonData, {
  style: function (feature) {
    return {
      color: feature.properties.density > 50 ? "#e74c3c" : "#2ecc71",
      weight: 2,
      fillOpacity: 0.5
    };
  }
}).addTo(map);

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

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

Разные типы геометрии реагируют на параметры style по-разному:

  • Polyline — учитывает только параметры линии (color, weight, opacity, dashArray)
  • Polygon — использует линии и заливку (fillColor, fillOpacity)
  • Circle / CircleMarker — комбинирует радиус с теми же стилевыми параметрами
  • Rectangle — аналогично полигону

Важно, что fill по умолчанию включён для полигонов, но может быть отключён явно:

fill: false

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

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

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

layer.setStyle({
  color: "#ff0000",
  weight: 4
});

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

Состояния взаимодействия и визуальная реакция

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

function defaultStyle() {
  return {
    color: "#3498db",
    weight: 2,
    fillOpacity: 0.3
  };
}

function highlightStyle() {
  return {
    color: "#f1c40f",
    weight: 4,
    fillOpacity: 0.6
  };
}

L.geoJSON(geojsonData, {
  style: defaultStyle,
  onEachFeature: function (feature, layer) {
    layer.on({
      mouseover: function () {
        layer.setStyle(highlightStyle());
      },
      mouseout: function () {
        layer.setStyle(defaultStyle());
      }
    });
  }
}).addTo(map);

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

Приоритеты стилей и переопределение

Стиль, заданный через style, может быть переопределён:

  1. Индивидуальными вызовами setStyle
  2. Inline-опциями конкретного слоя (L.polygon, L.polyline)
  3. Глобальными настройками рендера (через Path defaults)

Leaflet применяет последний установленный стиль, что важно учитывать при динамическом управлении слоями.

Связь с Path и внутренней моделью отрисовки

Все векторные объекты Leaflet наследуются от класса Path. Это означает, что style фактически является набором свойств, передаваемых в SVG или Canvas-рендерер.

В SVG-режиме:

  • color → stroke
  • weight → stroke-width
  • opacity → stroke-opacity
  • fillColor → fill
  • fillOpacity → fill-opacity

В Canvas-режиме те же параметры транслируются в контекст CanvasRenderingContext2D.

Использование style с CircleMarker

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

L.circleMarker([51.5, -0.09], {
  radius: 8,
  color: "#8e44ad",
  fillColor: "#9b59b6",
  fillOpacity: 0.8
}).addTo(map);

Здесь style может быть передан как объект или функция, аналогично GeoJSON.

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

При большом количестве объектов использование функции style с вычислениями на каждый feature может снижать производительность. В таких случаях применяется:

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

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

Комбинирование style и className

Leaflet поддерживает дополнительный способ стилизации через CSS-классы:

L.geoJSON(geojsonData, {
  style: {
    className: "custom-region"
  }
}).addTo(map);

Или:

className: function (feature) {
  return feature.properties.type === "urban" ? "urban-zone" : "rural-zone";
}

CSS-стили позволяют разгрузить JavaScript-логику и перенести часть визуального управления в таблицы стилей.

Использование прозрачности и наложений

Комбинация opacity и fillOpacity позволяет управлять визуальной иерархией слоёв:

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

Переопределение стиля по умолчанию

Leaflet использует стандартные стили для векторных объектов, если style не задан:

  • синий цвет линий
  • средняя толщина
  • полупрозрачная заливка для полигонов

Эти значения можно переопределить глобально через расширение L.Path.options, влияя на все создаваемые объекты:

L.Path.prototype.options.color = "#1abc9c";
L.Path.prototype.options.weight = 2;

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

Оглавление