Line-color, line-width, line-dasharray

Линейные слои (line) используются для отображения дорог, маршрутов, границ, инженерных сетей, треков GPS и любых других объектов, представленных в виде последовательности координат. Визуальное оформление линий в Mapbox GL JS определяется набором параметров секции paint, среди которых наиболее важными являются:

  • line-color — цвет линии;
  • line-width — толщина линии;
  • line-dasharray — шаблон штриховки.

Эти свойства позволяют создавать как простые линии, так и сложные картографические стили, напоминающие профессиональные ГИС-системы.

Создание линейного слоя

Исходный слой обычно строится на основе GeoJSON с геометрией типа LineString.

map.addSource('route', {
    type: 'geojson',
    data: {
        type: 'Feature',
        geometry: {
            type: 'LineString',
            coordinates: [
                [37.6176, 55.7558],
                [37.6500, 55.7700],
                [37.7000, 55.7800]
            ]
        }
    }
});

map.addLayer({
    id: 'route-line',
    type: 'line',
    source: 'route',
    paint: {
        'line-color': '#0066ff',
        'line-width': 4
    }
});

В данном примере создаётся синяя линия толщиной 4 пикселя.

Свойство line-color

Назначение

Свойство line-color определяет основной цвет линии.

paint: {
    'line-color': '#ff0000'
}

Результатом будет красная линия.

Поддерживаемые форматы цветов

Mapbox GL JS поддерживает несколько способов задания цвета.

HEX

'line-color': '#00ff00'

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

'line-color': '#0f0'

RGB

'line-color': 'rgb(0, 255, 0)'

RGBA

'line-color': 'rgba(0, 255, 0, 0.5)'

Последний параметр задаёт прозрачность.

Именованные цвета

'line-color': 'blue'

Хотя такой вариант поддерживается, в крупных проектах обычно используются HEX или RGBA для большей предсказуемости.

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

Цвет можно менять динамически.

map.setPaintProperty(
    'route-line',
    'line-color',
    '#ff8800'
);

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

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

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

GeoJSON:

{
    type: 'Feature',
    properties: {
        color: '#ff0000'
    },
    geometry: {
        type: 'LineString',
        coordinates: [...]
    }
}

Стиль:

paint: {
    'line-color': ['get', 'color']
}

Каждый объект будет отображаться своим цветом.

Условная окраска

Часто цвет зависит от характеристик объекта.

Например, от типа дороги:

paint: {
    'line-color': [
        'match',
        ['get', 'road_type'],
        'highway', '#ff0000',
        'primary', '#ffaa00',
        'secondary', '#00aa00',
        '#888888'
    ]
}

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

Градиентное окрашивание

Для линий возможно создание плавного перехода цвета.

Источник:

map.addSource('route', {
    type: 'geojson',
    lineMetrics: true,
    data: routeData
});

Стиль:

paint: {
    'line-gradient': [
        'interpolate',
        ['linear'],
        ['line-progress'],
        0, '#0000ff',
        0.5, '#00ff00',
        1, '#ff0000'
    ]
}

Здесь цвет плавно меняется по всей длине линии.

Следует учитывать, что при использовании line-gradient свойство line-color фактически заменяется градиентом.

Свойство line-width

Назначение

Свойство line-width определяет толщину линии в пикселях.

paint: {
    'line-width': 2
}

Тонкая линия:

paint: {
    'line-width': 1
}

Толстая линия:

paint: {
    'line-width': 10
}

Визуальное влияние толщины

Разница между значениями выглядит примерно следующим образом:

Значение Результат
1 Очень тонкая линия
2–4 Стандартные маршруты
5–8 Акцентированные объекты
10+ Магистрали, выделенные маршруты

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

map.setPaintProperty(
    'route-line',
    'line-width',
    8
);

Толщина обновится без пересоздания слоя.

Толщина из атрибутов

GeoJSON:

{
    type: 'Feature',
    properties: {
        width: 6
    },
    geometry: {
        type: 'LineString',
        coordinates: [...]
    }
}

Стиль:

paint: {
    'line-width': ['get', 'width']
}

Каждый объект будет иметь собственную толщину.

Масштабозависимая толщина

Наиболее распространённый сценарий — увеличение толщины при приближении карты.

paint: {
    'line-width': [
        'interpolate',
        ['linear'],
        ['zoom'],
        5, 1,
        10, 3,
        15, 8
    ]
}

Поведение:

Масштаб Толщина
5 1 px
10 3 px
15 8 px

Между указанными значениями выполняется плавная интерполяция.

Комбинация масштаба и данных

Возможно учитывать одновременно уровень масштабирования и свойства объекта.

paint: {
    'line-width': [
        '*',
        ['get', 'importance'],
        [
            'interpolate',
            ['linear'],
            ['zoom'],
            5, 1,
            15, 5
        ]
    ]
}

Такой подход часто применяется при стилизации дорожных сетей.

Эффект многослойных линий

Для создания контура используют несколько слоёв.

Нижний слой:

{
    id: 'route-border',
    type: 'line',
    source: 'route',
    paint: {
        'line-color': '#000000',
        'line-width': 8
    }
}

Верхний слой:

{
    id: 'route-main',
    type: 'line',
    source: 'route',
    paint: {
        'line-color': '#00aaff',
        'line-width': 5
    }
}

Получается эффект обводки, характерный для дорожных карт.

Свойство line-dasharray

Назначение

Свойство line-dasharray создаёт пунктирные линии.

Значение задаётся массивом чисел.

paint: {
    'line-dasharray': [2, 2]
}

Первое число определяет длину штриха, второе — длину промежутка.

Принцип работы

[2, 2]

означает:

██  ██  ██  ██
[4, 2]

означает:

████  ████  ████
[1, 3]

означает:

█   █   █   █

Создание классического пунктира

paint: {
    'line-color': '#ff0000',
    'line-width': 3,
    'line-dasharray': [3, 3]
}

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

Длинные штрихи

paint: {
    'line-dasharray': [8, 2]
}

Получается линия с длинными сегментами и короткими промежутками.

Редкие штрихи

paint: {
    'line-dasharray': [2, 8]
}

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

Сложные шаблоны

Массив может содержать несколько пар значений.

paint: {
    'line-dasharray': [4, 2, 1, 2]
}

Шаблон:

████  █  ████  █

После завершения последовательность повторяется.

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

Тонкая пунктирная линия:

paint: {
    'line-width': 1,
    'line-dasharray': [2, 2]
}

Толстая пунктирная линия:

paint: {
    'line-width': 8,
    'line-dasharray': [2, 2]
}

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

Типовые сценарии использования

Границы государств

paint: {
    'line-color': '#333333',
    'line-width': 2,
    'line-dasharray': [3, 2]
}

Пешие маршруты

paint: {
    'line-color': '#008800',
    'line-width': 4,
    'line-dasharray': [1, 1]
}

Проектируемые дороги

paint: {
    'line-color': '#ff8800',
    'line-width': 5,
    'line-dasharray': [5, 3]
}

Инженерные коммуникации

paint: {
    'line-color': '#0066cc',
    'line-width': 3,
    'line-dasharray': [2, 4]
}

Совместное использование line-color, line-width и line-dasharray

Все три свойства обычно работают вместе.

Пример оформления маршрута:

map.addLayer({
    id: 'hiking-route',
    type: 'line',
    source: 'route',
    paint: {
        'line-color': '#00aa55',
        'line-width': 4,
        'line-dasharray': [2, 2]
    }
});

Результат:

  • зелёный цвет маршрута;
  • толщина 4 пикселя;
  • пунктирная структура.

Масштабируемый пунктирный маршрут

map.addLayer({
    id: 'adaptive-route',
    type: 'line',
    source: 'route',
    paint: {
        'line-color': '#0066ff',
        'line-width': [
            'interpolate',
            ['linear'],
            ['zoom'],
            5, 1,
            10, 3,
            15, 7
        ],
        'line-dasharray': [3, 2]
    }
});

Линия становится толще по мере приближения карты, сохраняя пунктирный стиль.

Создание выделенного маршрута с контуром

Контур:

map.addLayer({
    id: 'route-outline',
    type: 'line',
    source: 'route',
    paint: {
        'line-color': '#000000',
        'line-width': 10
    }
});

Основная линия:

map.addLayer({
    id: 'route-main',
    type: 'line',
    source: 'route',
    paint: {
        'line-color': '#ffcc00',
        'line-width': 6,
        'line-dasharray': [4, 2]
    }
});

Такой приём обеспечивает высокую читаемость маршрута на любом фоне карты.

Производительность и рекомендации

Использование выражений (expressions) предпочтительнее создания большого количества отдельных слоёв. Один слой с условной стилизацией обычно работает быстрее десятков однотипных слоёв.

Масштабозависимая толщина (line-width) считается стандартной практикой для большинства картографических проектов, поскольку обеспечивает одинаковое визуальное восприятие объектов на разных уровнях приближения.

Пунктирные линии (line-dasharray) требуют дополнительных вычислений при рендеринге. Для большого количества объектов желательно использовать умеренно сложные шаблоны штриховки.

Цветовые схемы (line-color) рекомендуется подбирать с учётом контраста относительно базовой карты, чтобы маршруты и линейные объекты оставались хорошо различимыми при любом масштабе.

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

Оглавление