Fill-color, fill-opacity, fill-pattern

Полигональные объекты занимают особое место в визуализации геоданных. Они используются для отображения административных границ, земельных участков, парков, озёр, лесов, районов городов, зон покрытия сервисов и множества других пространственных объектов. В Mapbox GL JS для отображения закрашенных полигонов применяется слой типа fill.

Слой fill поддерживает большое количество параметров оформления, однако наиболее важными являются:

  • fill-color — цвет заливки полигона;
  • fill-opacity — прозрачность заливки;
  • fill-pattern — использование текстур вместо однотонного цвета.

Именно эти свойства определяют внешний вид большинства полигональных объектов на карте.

Слой типа fill

Для отображения полигона создаётся источник данных (source) и слой типа fill.

Пример GeoJSON с полигоном:

map.addSource('park', {
    type: 'geojson',
    data: {
        type: 'Feature',
        geometry: {
            type: 'Polygon',
            coordinates: [[
                [37.60, 55.75],
                [37.62, 55.75],
                [37.62, 55.77],
                [37.60, 55.77],
                [37.60, 55.75]
            ]]
        }
    }
});

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

map.addLayer({
    id: 'park-fill',
    type: 'fill',
    source: 'park',
    paint: {
        'fill-color': '#4CAF50'
    }
});

Результатом станет зелёный закрашенный полигон.

Свойство fill-color

Назначение

Свойство fill-color определяет основной цвет заливки полигона.

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

paint: {
    'fill-color': '#2196F3'
}

Поддерживаются различные форматы цветов:

HEX

'fill-color': '#FF5722'

Сокращённый HEX

'fill-color': '#F80'

RGB

'fill-color': 'rgb(255, 87, 34)'

RGBA

'fill-color': 'rgba(255, 87, 34, 0.5)'

HSL

'fill-color': 'hsl(15, 100%, 55%)'

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

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

map.setPaintProperty(
    'park-fill',
    'fill-color',
    '#E91E63'
);

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

Использование данных объекта

Цвет часто зависит от атрибутов объекта.

Предположим, имеется GeoJSON:

{
    type: 'Feature',
    properties: {
        category: 'forest'
    }
}

Для выбора цвета используется выражение match.

paint: {
    'fill-color': [
        'match',
        ['get', 'category'],
        'forest', '#4CAF50',
        'water', '#2196F3',
        'industrial', '#9E9E9E',
        '#CCCCCC'
    ]
}

Логика работы:

Значение category Цвет
forest зелёный
water синий
industrial серый
любое другое светло-серый

Градиентное окрашивание по значениям

Для числовых данных применяется выражение interpolate.

Исходные данные:

{
    population: 500000
}

Настройка:

paint: {
    'fill-color': [
        'interpolate',
        ['linear'],
        ['get', 'population'],
        0, '#FFF5F0',
        1000000, '#FB6A4A',
        5000000, '#67000D'
    ]
}

Чем выше население, тем темнее цвет полигона.

Подобная техника активно используется в:

  • демографических картах;
  • тепловых распределениях;
  • анализе продаж;
  • статистических отчётах;
  • картографических дашбордах.

Зависимость цвета от масштаба

Цвет может изменяться при приближении карты.

paint: {
    'fill-color': [
        'interpolate',
        ['linear'],
        ['zoom'],
        5, '#81C784',
        10, '#4CAF50',
        15, '#1B5E20'
    ]
}

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

Цветовые переходы

Mapbox GL JS поддерживает плавную анимацию изменения цветов.

Настройка:

map.setPaintProperty(
    'park-fill',
    'fill-color-transition',
    {
        duration: 1000,
        delay: 0
    }
);

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

Свойство fill-opacity

Назначение

fill-opacity задаёт степень прозрачности полигона.

Диапазон значений:

0.0 — полностью прозрачен
1.0 — полностью непрозрачен

Пример:

paint: {
    'fill-color': '#2196F3',
    'fill-opacity': 0.5
}

Полигон будет отображаться с прозрачностью 50%.

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

paint: {
    'fill-opacity': 0
}

Объект останется в слое, но визуально исчезнет.

Это может использоваться для:

  • интерактивных зон;
  • областей наведения;
  • обработки событий мыши;
  • временного скрытия объектов.

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

paint: {
    'fill-opacity': 1
}

Максимально насыщенное отображение полигона.

Изменение прозрачности во время работы

map.setPaintProperty(
    'park-fill',
    'fill-opacity',
    0.3
);

Прозрачность изменится мгновенно.

Прозрачность по атрибутам объектов

Допустим:

{
    density: 85
}

Настройка:

paint: {
    'fill-opacity': [
        'interpolate',
        ['linear'],
        ['get', 'density'],
        0, 0.2,
        50, 0.5,
        100, 1
    ]
}

Более плотные районы будут отображаться менее прозрачными.

Прозрачность в зависимости от масштаба

paint: {
    'fill-opacity': [
        'interpolate',
        ['linear'],
        ['zoom'],
        5, 0.2,
        10, 0.6,
        15, 1
    ]
}

По мере приближения карта становится более насыщенной.

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

Анимация прозрачности

Mapbox GL JS позволяет плавно изменять прозрачность.

map.setPaintProperty(
    'park-fill',
    'fill-opacity-transition',
    {
        duration: 800,
        delay: 0
    }
);

После изменения значения слой будет плавно появляться или исчезать.

Совместное использование fill-color и fill-opacity

Чаще всего оба свойства работают вместе.

Пример:

paint: {
    'fill-color': '#4CAF50',
    'fill-opacity': 0.4
}

Получается полупрозрачный зелёный полигон.

Подобная визуализация хорошо подходит для:

  • экологических зон;
  • зон доставки;
  • статистических областей;
  • тематических карт.

fill-opacity и RGBA

Существует два способа управления прозрачностью.

Через RGBA:

'fill-color': 'rgba(76, 175, 80, 0.5)'

Через отдельное свойство:

'fill-color': '#4CAF50',
'fill-opacity': 0.5

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

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

Свойство fill-pattern

Назначение

fill-pattern заменяет однотонную заливку текстурой или изображением.

Такой подход часто применяется для отображения:

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

Подготовка изображения

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

map.loadImage(
    '/images/pattern.png',
    (error, image) => {
        if (error) throw error;

        map.addImage('forest-pattern', image);
    }
);

После регистрации изображение получает имя:

forest-pattern

Применение текстуры

paint: {
    'fill-pattern': 'forest-pattern'
}

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

Полный пример

map.loadImage('/images/pattern.png', (error, image) => {

    if (error) throw error;

    map.addImage('forest-pattern', image);

    map.addLayer({
        id: 'forest-area',
        type: 'fill',
        source: 'forest-source',
        paint: {
            'fill-pattern': 'forest-pattern'
        }
    });

});

Тайловое повторение

Mapbox автоматически повторяет изображение внутри полигона.

Если исходная текстура имеет размер:

32 × 32 px

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

Поэтому для паттернов обычно используются небольшие изображения.

Выбор паттерна по данным

Разные объекты могут использовать разные текстуры.

Пример:

paint: {
    'fill-pattern': [
        'match',
        ['get', 'landuse'],
        'forest', 'forest-pattern',
        'agriculture', 'farm-pattern',
        'industrial', 'factory-pattern',
        'default-pattern'
    ]
}

Каждая категория получит собственную заливку.

Комбинирование fill-pattern и fill-opacity

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

paint: {
    'fill-pattern': 'forest-pattern',
    'fill-opacity': 0.6
}

Паттерн станет полупрозрачным.

Это полезно, когда необходимо одновременно показывать:

  • текстуру;
  • подложку карты;
  • другие слои данных.

Ограничения fill-pattern

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

fill-color не влияет на текстуру

Если указан паттерн:

paint: {
    'fill-pattern': 'forest-pattern',
    'fill-color': '#4CAF50'
}

цвет заливки не применяется к изображению паттерна.

Отображаться будет именно текстура.

Качество зависит от исходного изображения

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

Слишком большие изображения:

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

Наиболее распространённые размеры:

16×16
32×32
64×64

Паттерны должны быть зарегистрированы

Попытка использовать несуществующий паттерн вызовет ошибку:

'fill-pattern': 'unknown-pattern'

Поэтому изображение всегда должно быть добавлено через:

map.addImage(...)

до создания слоя.

Практические сценарии использования

Тематическая карта землепользования

paint: {
    'fill-pattern': [
        'match',
        ['get', 'type'],
        'forest', 'forest-pattern',
        'field', 'field-pattern',
        'industry', 'industry-pattern',
        'default-pattern'
    ]
}

Карта плотности населения

paint: {
    'fill-color': [
        'interpolate',
        ['linear'],
        ['get', 'population'],
        0, '#FFFFCC',
        1000000, '#FD8D3C',
        5000000, '#800026'
    ],
    'fill-opacity': 0.7
}

Отображение охраняемых зон

paint: {
    'fill-color': '#2E7D32',
    'fill-opacity': 0.25
}

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

Производительность

При работе с большим количеством полигонов рекомендуется:

  • использовать векторные тайлы вместо крупных GeoJSON-файлов;
  • избегать чрезмерно сложных выражений для каждого объекта;
  • применять компактные текстуры для fill-pattern;
  • минимизировать число одновременно отображаемых полигональных слоёв;
  • использовать масштабно-зависимые стили для снижения визуальной нагрузки.

Свойства fill-color, fill-opacity и fill-pattern формируют основу визуального оформления полигональных данных в Mapbox GL JS. Комбинируя однотонные заливки, прозрачность, выражения стилей и текстурированные паттерны, можно создавать как простые тематические карты, так и сложные профессиональные геоинформационные интерфейсы с высокой степенью детализации и наглядности.

Оглавление