Fill слой

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

В структуре рендеринга MapLibre GL JS слой fill относится к категории fill-layers и участвует в компоновке карты в порядке z-index относительно других слоёв, таких как line, circle и symbol.

Источники данных и связь с геометрией

Слой fill работает с источниками, содержащими полигональные данные.

Наиболее распространённый источник — GeoJSON:

map.addSource('regions', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {
          name: 'Region A'
        },
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [37.62, 55.75],
              [37.65, 55.75],
              [37.65, 55.77],
              [37.62, 55.77],
              [37.62, 55.75]
            ]
          ]
        }
      }
    ]
  }
});

Добавление слоя fill:

map.addLayer({
  id: 'regions-fill',
  type: 'fill',
  source: 'regions',
  paint: {
    'fill-color': '#2E86AB',
    'fill-opacity': 0.6
  }
});

Для векторных тайлов используется аналогичная логика, но с указанием source-layer:

map.addLayer({
  id: 'landuse-fill',
  type: 'fill',
  source: 'composite',
  'source-layer': 'landuse',
  paint: {
    'fill-color': '#A8D5BA',
    'fill-opacity': 0.5
  }
});

Основные свойства слоя fill

Цвет заливки

Ключевое свойство — fill-color. Оно определяет внутренний цвет полигона и поддерживает выражения.

Простой вариант:

'fill-color': '#4C78A8'

Динамическая стилизация по атрибутам:

'fill-color': [
  'match',
  ['get', 'type'],
  'park', '#2ECC71',
  'water', '#3498DB',
  'industrial', '#95A5A6',
  '#CCCCCC'
]

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

Свойство fill-opacity управляет видимостью полигона.

'fill-opacity': 0.4

Вариант с зависимостью от масштаба:

'fill-opacity': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 0.2,
  10, 0.6,
  15, 0.9
]

Обводка полигона

Хотя fill отвечает за заливку, визуальная граница часто задаётся через fill-outline-color.

'fill-outline-color': '#1B1B1B'

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

Поведение на сложной геометрии

Мультиполигоны

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

{
  "type": "MultiPolygon",
  "coordinates": [
    [
      [
        [30, 50],
        [31, 50],
        [31, 51],
        [30, 50]
      ]
    ],
    [
      [
        [32, 50],
        [33, 50],
        [33, 51],
        [32, 50]
      ]
    ]
  ]
}

Вырезанные области и дыры

Полигональные «дыры» определяются вложенными кольцами координат:

{
  "type": "Polygon",
  "coordinates": [
    [
      [0, 0],
      [10, 0],
      [10, 10],
      [0, 10],
      [0, 0]
    ],
    [
      [3, 3],
      [7, 3],
      [7, 7],
      [3, 7],
      [3, 3]
    ]
  ]
}

Внутреннее кольцо автоматически вырезается из заливки.

Фильтрация объектов

Слой fill поддерживает фильтры для отбора объектов на этапе рендеринга.

filter: ['==', ['get', 'category'], 'residential']

Сложные фильтры:

filter: [
  'all',
  ['!=', ['get', 'status'], 'deprecated'],
  ['>=', ['get', 'density'], 50]
]

Фильтрация применяется до отрисовки, что снижает нагрузку на GPU.

Выражения и тематическая картография

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

Пример классификации по плотности:

'fill-color': [
  'interpolate',
  ['linear'],
  ['get', 'population_density'],
  0, '#F2F0F7',
  50, '#BCBDDC',
  100, '#756BB1',
  200, '#54278F'
]

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

Анимация и переходы

MapLibre GL JS поддерживает плавные переходы через свойства transition:

'fill-color-transition': {
  duration: 500,
  delay: 0
},
'fill-opacity-transition': {
  duration: 300
}

Анимация применяется при изменении стиля или данных, создавая интерполяцию между значениями.

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

Слой fill участвует в событийной модели карты. Геометрии доступны для hit-testing.

Пример обработки наведения:

map.on('mousemove', 'regions-fill', (e) => {
  map.getCanvas().style.cursor = 'pointer';
});

Получение свойств объекта:

map.on('click', 'regions-fill', (e) => {
  const properties = e.features[0].properties;
});

Feature-state и динамическое обновление

Для интерактивных сценариев используется feature-state, позволяющий изменять стиль без пересборки источника.

map.setFeatureState(
  { source: 'regions', id: 1 },
  { hovered: true }
);

Использование в стиле:

'fill-opacity': [
  'case',
  ['boolean', ['feature-state', 'hovered'], false],
  0.9,
  0.4
]

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

Z-индексация и порядок отрисовки

Слои fill отрисовываются в порядке добавления, если не задано свойство beforeId. Это влияет на перекрытие полигонов.

Особенности:

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

Производительность при больших наборах данных

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

Векторные тайлы предпочтительнее GeoJSON при больших объёмах, так как:

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

Для GeoJSON важно учитывать:

  • упрощение геометрии (simplification)
  • уменьшение количества вершин
  • использование кластеризации вне fill слоя

Комбинация с другими слоями

Fill слой часто используется совместно:

  • line слой — для контуров
  • symbol слой — для подписей
  • circle слой — для точечных данных внутри полигонов

Пример композиции:

map.addLayer({
  id: 'regions-fill',
  type: 'fill',
  source: 'regions',
  paint: {
    'fill-color': '#88C0D0',
    'fill-opacity': 0.5
  }
});

map.addLayer({
  id: 'regions-outline',
  type: 'line',
  source: 'regions',
  paint: {
    'line-color': '#2E3440',
    'line-width': 1
  }
});

Особенности рендеринга на границах тайлов

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

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

Использование выражений для адаптивной стилизации

Fill слой поддерживает полный набор expression API MapLibre GL JS, включая:

  • условные конструкции
  • математические операции
  • доступ к свойствам feature
  • доступ к zoom

Пример комбинированной логики:

'fill-color': [
  'case',
  ['>', ['zoom'], 10],
  [
    'interpolate',
    ['linear'],
    ['get', 'value'],
    0, '#FEE5D9',
    100, '#A50F15'
  ],
  '#D0D0D0'
]

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

Оглавление