Исключение дорог

Векторные стили в Mapbox GL JS построены на системе слоёв, где каждый визуальный компонент карты представлен отдельным слоем с привязкой к источнику данных. Дорожная сеть почти всегда является частью базового стиля и включает множество подслоёв: магистрали, второстепенные дороги, улицы, мосты, тоннели и подписи. Исключение дорог из отображения сводится к управлению этими слоями через API стиля и модификации их свойств или фильтров.

В стандартных стилях Mapbox дорожная сеть представлена не одним слоем, а группой:

  • road-primary / road-motorway — магистрали и трассы
  • road-secondary — региональные дороги
  • road-street — городские улицы
  • road-major-link / road-minor-link — соединительные участки
  • road-bridge-* — мосты
  • road-tunnel-* — тоннели
  • road-label — подписи дорог

Все эти слои обычно подключены к источнику composite, который агрегирует данные из векторных тайлов.

Ключевая особенность архитектуры заключается в том, что визуальное «исключение дорог» не означает удаление данных. Речь идёт исключительно о деактивации рендеринга слоёв.

Управление видимостью дорожных слоёв

Наиболее прямой способ исключить дороги — изменение свойства layout.visibility для каждого слоя.

map.on('load', () => {
  const layers = map.getStyle().layers;

  layers.forEach(layer => {
    if (layer.id.includes('road')) {
      map.setLayoutProperty(layer.id, 'visibility', 'none');
    }
  });
});

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

Фильтрация дорожных слоёв по типу

Более контролируемый способ — применение фильтрации по свойствам слоя. Некоторые стили содержат поле layer["source-layer"], позволяющее точнее определить принадлежность к дорожной категории.

map.getStyle().layers.forEach(layer => {
  if (layer['source-layer'] === 'road') {
    map.setLayoutProperty(layer.id, 'visibility', 'none');
  }
});

Однако в большинстве официальных стилей Mapbox дорожная сеть разделена на несколько source-layer, поэтому фильтрация только по этому признаку может быть недостаточной.

Удаление слоёв из стиля

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

map.on('load', () => {
  const layers = map.getStyle().layers.slice();

  for (const layer of layers) {
    if (layer.id.startsWith('road') ||
        layer.id.includes('bridge') ||
        layer.id.includes('tunnel')) {
      map.removeLayer(layer.id);
    }
  }
});

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

Работа с порядком слоёв

Дорожные слои часто занимают промежуточное положение в стекe рендеринга: между landuse и label слоями. При удалении дорог важно учитывать, что часть объектов (например, подписи или контуры районов) может визуально измениться из-за отсутствия опорной геометрии.

Проверка порядка слоёв осуществляется через:

console.log(map.getStyle().layers.map(l => l.id));

Изменение порядка не влияет на исключение дорог напрямую, но важно при частичном скрытии, когда некоторые дорожные элементы остаются активными.

Использование кастомных стилей Mapbox Studio

Более устойчивый подход к исключению дорог — редактирование стиля на уровне Mapbox Studio. В редакторе можно:

  • отключить группы слоёв road
  • удалить отдельные классы дорог
  • оставить только landuse, water, building layers
  • экспортировать стиль как custom style URL

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

При загрузке кастомного стиля:

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/custom/style-id'
});

Дорожная сеть уже отсутствует на уровне конфигурации.

Динамическое переключение режимов отображения

Исключение дорог часто применяется как часть режимов визуализации: «чистая карта», «аналитическая подложка», «тепловая карта без контекста дорог».

Реализация переключения:

function toggleRoads(visible) {
  const visibility = visible ? 'visible' : 'none';

  map.getStyle().layers.forEach(layer => {
    if (layer.id.includes('road')) {
      map.setLayoutProperty(layer.id, 'visibility', visibility);
    }
  });
}

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

Учет мостов и тоннелей как части дорожной системы

Мосты и тоннели часто визуально связаны с дорогами, но могут существовать как отдельные слои. Исключение только road-* слоёв иногда оставляет визуальные артефакты:

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

Поэтому полное исключение дорожной сети требует расширенного списка:

const exclude = ['road', 'bridge', 'tunnel'];

map.getStyle().layers.forEach(layer => {
  if (exclude.some(prefix => layer.id.includes(prefix))) {
    map.setLayoutProperty(layer.id, 'visibility', 'none');
  }
});

Влияние на подписи и label слои

Дорожные подписи часто отделены от геометрии и находятся в слое road-label или related label layers. Их исключение требует отдельной обработки.

if (layer.id.includes('road-label')) {
  map.setLayoutProperty(layer.id, 'visibility', 'none');
}

Без удаления label-слоёв карта может сохранять текстовую привязку к отсутствующим дорогам, что создаёт визуальную несогласованность.

Ограничения и особенности производительности

Изменение видимости большого количества слоёв одновременно может вызывать:

  • кратковременные перерисовки (repaint)
  • задержки при первом применении изменений
  • перерасчёт z-index структуры

Оптимизация достигается через групповые операции и минимизацию количества вызовов setLayoutProperty.

Более эффективная стратегия — отключение слоёв через изменение стиля целиком, а не по одному слою.

Альтернативный подход через фильтрацию источника данных

В некоторых кастомных стилях возможно использование фильтра на уровне source-layer:

map.setFilter('road-primary', ['==', ['get', 'class'], 'none']);

Этот метод применим только если стиль заранее поддерживает фильтруемые свойства дорожной сети. В стандартных стилях Mapbox подобная стратегия ограничена.

Комбинированные стратегии исключения

В реальных проектах применяется сочетание методов:

  • скрытие layout.visibility для runtime управления
  • удаление слоёв в кастомных стилях
  • редактирование стиля в Mapbox Studio
  • фильтрация отдельных классов дорог

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

Работа с кастомными тайловыми стилями

При использовании собственных векторных тайлов структура дорожных слоёв может быть полностью переопределена. В этом случае идентификаторы слоёв зависят от схемы данных:

  • highways
  • streets
  • transport_roads
  • geometry_lines

Исключение дорог становится задачей согласования client-side логики с server-side схемой данных.

map.setLayoutProperty('highways', 'visibility', 'none');

Взаимодействие с темами и переключением стилей

При смене стиля карты (например, light → dark → satellite) дорожные слои пересоздаются. Это означает, что любые изменения visibility необходимо повторно применять:

map.on('styledata', () => {
  hideRoads();
});

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

Поведение при использовании спутниковых подложек

В спутниковых стилях дороги часто представлены поверх изображения в виде полупрозрачных векторных слоёв. Их исключение приводит к:

  • исчезновению маршрутов
  • сохранению географической текстуры без аннотаций
  • визуальному «очищению» поверхности земли

При этом спутниковый слой остаётся неизменным, так как он является raster source и не зависит от vector layers.

Итоговая модель управления дорожной визуализацией

Исключение дорог в Mapbox GL JS представляет собой управление иерархией слоёв, где ключевыми механизмами выступают:

  • изменение layout.visibility
  • удаление слоёв из стиля
  • фильтрация по source-layer и id
  • редактирование стиля на уровне Mapbox Studio
  • обработка пересоздания стиля при смене темы

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

Оглавление