Толщина линий и границ

В MapLibre GL JS MapLibre GL JS управление толщиной линий и границ реализуется через стиль слоя (layer style), где визуальные параметры задаются декларативно и могут зависеть от масштаба, данных и состояния карты. Основным инструментом выступает свойство line-width, применяемое к слоям типа line, а также комбинации fill-outline-color, дублирующих слоёв и выражений (expressions), позволяющих строить адаптивную геометрию отображения.

Толщина линии задаётся через paint-параметр:

map.addLayer({
  id: 'roads',
  type: 'line',
  source: 'vector-source',
  'source-layer': 'transportation',
  paint: {
    'line-color': '#3b82f6',
    'line-width': 4
  }
});

Значение line-width интерпретируется в пикселях экранного пространства, а не в координатах карты. Это означает, что при масштабировании карты географические расстояния меняются, но толщина линии остаётся визуально стабильной, если не задано иное поведение.

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

Одним из ключевых механизмов является интерполяция по zoom. MapLibre GL JS поддерживает выражения, позволяющие изменять толщину плавно:

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

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

Альтернативный вариант — ступенчатая функция:

'line-width': [
  'step',
  ['zoom'],
  1,
  8, 2,
  12, 5,
  16, 10
]

Ступенчатая модель создаёт резкие переключения толщины, что полезно для карт с упрощённой стилизацией.

Выражения и данные (data-driven styling)

Толщина линии может зависеть от свойств объекта:

'line-width': [
  'case',
  ['==', ['get', 'highway'], 'primary'],
  6,
  ['==', ['get', 'highway'], 'secondary'],
  4,
  2
]

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

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

Параметры формы линии и их влияние на восприятие толщины

Толщина линии в MapLibre GL JS не существует изолированно — она взаимодействует с геометрическими параметрами:

line-join

'line-join': 'round'
  • miter — острые углы, визуально усиливают ощущение тонкости на поворотах
  • round — сглаженные углы, создают визуально более толстую линию
  • bevel — срезанные углы, компромисс между резкостью и гладкостью

При увеличении line-width различия между join-режимами становятся особенно заметными.

line-cap

'line-cap': 'round'
  • butt — обрезает линию строго по точке окончания
  • round — добавляет полукруглые окончания, визуально увеличивая толщину
  • square — удлиняет линию за пределы конечной точки

Фактическая воспринимаемая толщина линии часто определяется именно cap-режимом, особенно на коротких сегментах.

Тонкие линии и проблемы антиалиасинга

При малых значениях line-width (менее 1px) вступает в работу субпиксельная отрисовка. MapLibre GL JS использует WebGL-рендеринг, где линии могут становиться полупрозрачными из-за сглаживания.

Типичные эффекты:

  • «исчезновение» линий на определённых зумах
  • мерцание при анимации масштаба
  • неравномерная толщина на диагоналях

Для компенсации часто используют минимальные значения:

'line-width': [
  'interpolate',
  ['linear'],
  ['zoom'],
  5, 0.5,
  10, 2
]

или задают пороговое минимальное значение через step.

Дублирование слоёв для имитации обводки (borders)

Часто границы дорог и регионов создаются не одним слоем, а комбинацией:

  • нижний слой — толстая линия (обводка)
  • верхний слой — тонкая линия (внутренний цвет)

Пример:

map.addLayer({
  id: 'road-border',
  type: 'line',
  source: 'vector-source',
  paint: {
    'line-color': '#111827',
    'line-width': 8
  }
});

map.addLayer({
  id: 'road-inner',
  type: 'line',
  source: 'vector-source',
  paint: {
    'line-color': '#60a5fa',
    'line-width': 5
  }
});

Такой приём создаёт эффект обводки, который невозможно полностью воспроизвести только через line-width.

Границы полигонов и fill-outline-color

Для слоёв типа fill используется отдельный механизм:

paint: {
  'fill-color': '#a7f3d0',
  'fill-outline-color': '#065f46'
}

Важно, что fill-outline-color не поддерживает настройку толщины. Это не геометрическая линия, а рендеринговая обводка полигона.

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

Масштабируемые границы регионов

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

'line-width': [
  'interpolate',
  ['exponential', 1.5],
  ['zoom'],
  3, 0.5,
  6, 1,
  10, 2,
  14, 4
]

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

Влияние разрешения и pixel ratio

Толщина линий зависит от devicePixelRatio. На дисплеях Retina фактическая физическая толщина линии может выглядеть тоньше при одинаковом значении line-width. MapLibre GL JS компенсирует это автоматически, но визуальные различия всё равно возможны при сложных стилях и субпиксельных значениях.

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

Визуальная «толщина» может имитироваться через многослойность и прозрачность:

'line-color': 'rgba(59, 130, 246, 0.3)',
'line-width': 10

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

Анимация толщины линий

Толщина может динамически изменяться через setPaintProperty:

map.setPaintProperty('roads', 'line-width', 10);

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

Оптимизация при большом количестве линий

При работе с плотными слоями дорог или контуров увеличение line-width напрямую влияет на нагрузку GPU:

  • толстые линии увеличивают количество фрагментов
  • сложные joins требуют дополнительных вычислений
  • dasharray усиливает стоимость рендеринга

Рекомендуется комбинировать:

  • минимально достаточную толщину
  • упрощённую геометрию на низких zoom
  • разделение слоёв по важности

Dash и влияние на визуальную толщину

'line-dasharray': [2, 2]

Пунктирные линии визуально воспринимаются тоньше, чем сплошные при одинаковом line-width. Это связано с уменьшением заполненной площади штриха.

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

Оглавление