Line слой

Line слой (type: "line") используется для визуализации линейных геометрий на карте: дорог, маршрутов, границ, троп, инженерных сетей и любых других объектов, представленных в виде LineString или MultiLineString. В рамках стилевой спецификации MapLibre GL JS этот слой относится к категории векторного рендеринга и поддерживает богатую систему стилизации, включая интерполяции, выражения и динамические свойства.

Геометрическая основа Line слоя

Line слой работает исключительно с линейными типами геометрий:

  • LineString — одиночная линия, состоящая из последовательности координат
  • MultiLineString — набор независимых линий

GeoJSON-структура источника данных обычно выглядит следующим образом:

{
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [71.4304, 51.1282],
      [71.4500, 51.1350],
      [71.4700, 51.1400]
    ]
  },
  "properties": {
    "name": "route-1"
  }
}

Для MultiLineString:

{
  "type": "Feature",
  "geometry": {
    "type": "MultiLineString",
    "coordinates": [
      [
        [71.43, 51.12],
        [71.44, 51.13]
      ],
      [
        [71.45, 51.14],
        [71.46, 51.15]
      ]
    ]
  }
}

Добавление источника данных

Line слой всегда опирается на источник (source) типа GeoJSON или vector tile.

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

map.addSource("routes", {
  type: "geojson",
  data: {
    type: "FeatureCollection",
    features: [/* линии */]
  }
});

Создание Line слоя

Базовая конфигурация слоя:

map.addLayer({
  id: "route-line",
  type: "line",
  source: "routes",
  paint: {
    "line-color": "#3b82f6",
    "line-width": 4
  }
});

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

Основные свойства paint

line-color

Определяет цвет линии. Поддерживает:

  • фиксированные значения
  • выражения (expressions)
  • data-driven стилизацию
"line-color": "#ff0000"

Пример с выражением:

"line-color": [
  "match",
  ["get", "type"],
  "highway", "#ff5722",
  "street", "#2196f3",
  "#999999"
]

line-width

Толщина линии в пикселях. Может зависеть от зума:

"line-width": 2

Адаптивная толщина:

"line-width": [
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 1,
  10, 3,
  15, 8
]

line-opacity

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

"line-opacity": 0.6

Комбинируется с цветом для создания слоёв визуальной иерархии (например, фон + обводка).

line-blur

Размытие линии. Используется для эффектов свечения или мягких контуров:

"line-blur": 1.5

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

line-dasharray

Создание пунктирных линий:

"line-dasharray": [2, 2]

Интерпретация:

  • первое число — длина штриха
  • второе — длина пробела

Анимационные эффекты достигаются изменением массива во времени.

line-join

Определяет поведение соединений сегментов:

  • miter — острые углы
  • bevel — срезанные углы
  • round — скруглённые углы
"line-join": "round"

line-cap

Определяет форму концов линии:

  • butt — обрезанный конец
  • round — округлый
  • square — квадратное продолжение
"line-cap": "round"

line-offset

Смещение линии относительно оригинальной геометрии. Используется для параллельных линий (например, полосы дорог):

"line-offset": 3

Можно комбинировать с несколькими слоями для создания двойных и тройных контуров.

line-gradient

Создание градиента вдоль линии на основе прогресса:

"line-gradient": [
  "interpolate",
  ["linear"],
  ["line-progress"],
  0, "blue",
  1, "red"
]

Требует использования lineMetrics: true в source:

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

Layout свойства

Layout влияет на поведение слоя, а не на внешний вид.

visibility

"layout": {
  "visibility": "visible"
}

Данные и выражения

Line слой тесно интегрирован с системой выражений MapLibre GL JS. Это позволяет:

  • менять цвет в зависимости от свойств
  • управлять толщиной по атрибутам
  • скрывать линии по фильтрам

Пример фильтрации:

filter: ["==", ["get", "class"], "primary"]

Стилизация маршрутов

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

Базовая линия (фон)

{
  id: "route-bg",
  type: "line",
  source: "routes",
  paint: {
    "line-color": "#000000",
    "line-width": 8,
    "line-opacity": 0.2
  }
}

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

{
  id: "route-main",
  type: "line",
  source: "routes",
  paint: {
    "line-color": "#00c853",
    "line-width": 4
  }
}

Обводка

{
  id: "route-outline",
  type: "line",
  source: "routes",
  paint: {
    "line-color": "#ffffff",
    "line-width": 6
  }
}

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

Работа с зумом

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

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

Пример адаптивного поведения:

"line-opacity": [
  "interpolate",
  ["linear"],
  ["zoom"],
  6, 0.3,
  10, 0.7,
  14, 1
]

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

Line слой считается относительно лёгким для рендеринга, однако есть важные ограничения:

  • большое количество сегментов увеличивает нагрузку на GPU
  • сложные выражения в paint замедляют пересчёт стилей
  • частая анимация dasharray может снижать FPS

Оптимизационные подходы:

  • упрощение геометрии (simplify)
  • использование vector tiles вместо GeoJSON
  • разбиение длинных линий на сегменты
  • минимизация количества слоёв

Слои с несколькими Line представлениями

Частая практика — использование нескольких line слоёв поверх одной геометрии:

  • базовый слой (фон)
  • основной слой
  • эффект свечения
  • интерактивный слой (hover)

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

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

Line слой поддерживает события:

  • click
  • mouseenter
  • mouseleave

Пример:

map.on("click", "route-main", (e) => {
  console.log(e.features[0].properties);
});

Для точного взаимодействия часто используется queryRenderedFeatures.

Типовые ошибки при работе с Line слоем

  • отсутствие geometry: LineString (использование Point вместо линии)
  • попытка применить line-стили к fill-слою
  • использование dasharray без понимания масштабирования
  • перегрузка слоя сложными выражениями
  • отсутствие lineMetrics при использовании line-gradient

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

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

  • circle — отметки на маршруте
  • symbol — подписи и маркеры
  • fill — полигоны, ограниченные линиями

Пример: линия + маркеры остановок:

map.addLayer({
  id: "stops",
  type: "circle",
  source: "stops",
  paint: {
    "circle-radius": 5,
    "circle-color": "#ffcc00"
  }
});

Использование выражений line-progress

line-progress применяется в:

  • градиентах
  • анимациях маршрутов
  • визуализации движения

Он нормализует позицию вдоль линии от 0 до 1, что позволяет строить непрерывные эффекты независимо от длины геометрии.

Визуальные эффекты

На основе Line слоя реализуются:

  • эффект движения (анимированный dasharray)
  • светящиеся трассы (blur + overlay)
  • выделение активных маршрутов
  • heatmap-подобные линии через gradient

Сложные паттерны стилизации

Пример условной стилизации по свойствам:

"line-color": [
  "case",
  ["==", ["get", "status"], "active"], "#00e676",
  ["==", ["get", "status"], "inactive"], "#9e9e9e",
  "#2196f3"
]

Векторные тайлы и Line слой

При работе с vector tile источниками Line слой получает преимущества:

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

Пример:

map.addSource("roads", {
  type: "vector",
  url: "mapbox://tileset-id"
});

Многослойная архитектура отображения линий

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

  1. Data source
  2. Background line layer
  3. Main line layer
  4. Highlight layer
  5. Interaction layer

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

Поведение при пересечениях и наложениях

Line слой не выполняет автоматическое разрешение коллизий между линиями. При наложении:

  • верхние слои перекрывают нижние
  • порядок зависит от z-index (порядка добавления слоя)
  • визуальная иерархия задаётся структурой слоёв

Масштабируемые паттерны использования

Line слой является базовым инструментом для:

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

Его гибкость обеспечивается сочетанием:

  • выражений
  • многослойности
  • GPU-рендеринга
Оглавление