Заливка полигонов

В Leaflet полигоны представляют собой один из базовых типов векторных слоёв, предназначенных для отображения площадных объектов на карте. Их визуальное оформление строится через набор стилевых параметров, среди которых ключевую роль играет заливка (fill). Именно она формирует восприятие площади объекта, отделяя его от фоновой карты и других слоёв.

Каждый полигон в Leaflet наследует поведение от абстрактного класса Path. Это означает, что все параметры отображения задаются через единый объект стиля, применяемый при создании слоя или изменении его свойств.

Основные параметры заливки:

  • fill — включение или отключение заливки
  • fillColor — цвет заливки
  • fillOpacity — прозрачность заливки
  • fillRule — правило заливки для самопересекающихся контуров
  • stroke — отображение границы, влияющее на восприятие заливки
  • color — цвет обводки, визуально отделяющей заливку

Базовая структура задания стиля:

L.polygon(latlngs, {
  fill: true,
  fillColor: '#3388ff',
  fillOpacity: 0.5,
  color: '#1f4f99',
  weight: 2
}).addTo(map);

Цвет заливки и его особенности

Параметр fillColor принимает любое CSS-совместимое значение цвета: HEX, RGB, RGBA, HSL.

Использование фиксированного цвета:

fillColor: '#2ecc71'

Использование прозрачного формата:

fillColor: 'rgba(46, 204, 113, 0.6)'

Приоритет между fillColor и color разделяет визуальные функции: первый отвечает за площадь, второй — за границу. Визуальная читаемость картографических данных часто зависит от контраста между ними.

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

fillOpacity регулирует степень видимости слоя заливки. Значения варьируются от 0 до 1.

fillOpacity: 0.2

При значениях, близких к 0, полигоны становятся вспомогательными визуальными элементами. При значениях 0.6–0.8 достигается плотное перекрытие, характерное для тематических карт.

Комбинация с обводкой:

L.polygon(latlngs, {
  fillColor: '#e74c3c',
  fillOpacity: 0.35,
  color: '#c0392b',
  weight: 1
});

Отключение заливки

В некоторых сценариях требуется отображение только контуров. Для этого используется параметр fill: false.

L.polygon(latlngs, {
  fill: false,
  color: '#3498db'
});

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

Правило заливки fillRule

Параметр fillRule управляет тем, как интерпретируются пересекающиеся области внутри сложных полигонов.

Доступные значения:

  • evenodd
  • nonzero

Пример:

L.polygon(latlngs, {
  fillColor: '#8e44ad',
  fillOpacity: 0.4,
  fillRule: 'evenodd'
});

evenodd часто используется для корректного отображения полигонов с «дырами» (holes), особенно в GeoJSON-структурах.

Заливка через GeoJSON

При работе с геоданными стандартным способом является использование GeoJSON-слоёв. В этом случае стилизация задаётся через функцию style.

L.geoJSON(geojsonData, {
  style: function (feature) {
    return {
      fillColor: '#f1c40f',
      fillOpacity: 0.5,
      color: '#d4ac0d',
      weight: 1
    };
  }
}).addTo(map);

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

style: function (feature) {
  return {
    fillColor: feature.properties.density > 50 ? '#e74c3c' : '#2ecc71',
    fillOpacity: 0.6
  };
}

Мультиполигоны и вложенные области

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

L.polygon([
  [
    [55.75, 37.61],
    [55.76, 37.62],
    [55.74, 37.64]
  ],
  [
    [55.73, 37.60],
    [55.72, 37.63],
    [55.71, 37.61]
  ]
], {
  fillColor: '#16a085',
  fillOpacity: 0.4
});

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

Полигоны с отверстиями

Одной из особенностей Leaflet является поддержка внутренних контуров, создающих «дырки» внутри полигона.

L.polygon([
  outerRing,
  holeRing
], {
  fillColor: '#2980b9',
  fillOpacity: 0.5
});

В таких случаях важно корректное применение fillRule, иначе заливка может интерпретировать внутренние области некорректно.

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

Стили полигонов могут изменяться после их создания через метод setStyle.

polygon.setStyle({
  fillColor: '#9b59b6',
  fillOpacity: 0.7
});

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

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

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

polygon.on('mouseover', function () {
  this.setStyle({
    fillOpacity: 0.8
  });
});

polygon.on('mouseout', function () {
  this.setStyle({
    fillOpacity: 0.4
  });
});

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

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

Стиль полигона может задаваться на нескольких уровнях:

  • глобальные параметры GeoJSON
  • стиль конкретного слоя
  • переопределение через setStyle
  • inline-опции при создании

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

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

При работе с плотными слоями важно учитывать стоимость перерисовки заливки. Наиболее ресурсоёмкие параметры:

  • высокая прозрачность с частыми обновлениями
  • сложные геометрии с множеством узлов
  • частые вызовы setStyle

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

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

SVG и Canvas рендеринг

Leaflet использует SVG или Canvas для отрисовки полигонов. Заливка в SVG интерпретируется через fill атрибут, в Canvas — через контекст fillStyle.

Различия влияют на производительность и поведение прозрачности при наложении слоёв. Canvas предпочтителен при большом количестве объектов, SVG — при необходимости точного взаимодействия с DOM.

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

Стандартный API Leaflet не включает нативную поддержку градиентов, однако через SVG можно задавать кастомные определения:

fillColor: 'url(#gradient)'

Градиенты определяются через defs SVG-слоя, что позволяет создавать более сложные визуальные эффекты для тематических карт.

Комбинация заливки и всплывающих подсказок

Заливка часто используется совместно с tooltip-слоями, где визуальная насыщенность усиливает контекст данных:

polygon.bindTooltip('Область данных', {
  sticky: true
});

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

Визуальные паттерны и расширения

Расширения Leaflet позволяют использовать паттерны заливки (штриховка, точки, диагонали). Они реализуются через плагины и SVG-маски, где вместо сплошного цвета применяется текстурный слой.

Такие методы применяются для:

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