Landmarks

Landmarks в контексте веб-картографирования представляют собой объекты, которые пользователь воспринимает как ключевые ориентиры в пространстве: здания, достопримечательности, станции транспорта, природные объекты, точки интереса (POI). В Mapbox GL JS эти элементы реализуются через комбинацию слоёв (layers), источников данных (sources) и правил стилизации, обеспечивающих визуальную иерархию карты.

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

Типология landmarks в веб-картах

Векторные карты, используемые в Mapbox GL JS, разделяют landmarks на несколько категорий:

Точечные ориентиры (Point landmarks)

Представлены объектами GeoJSON или векторными тайлами:

  • станции метро и транспорта
  • рестораны и учреждения
  • остановки и сервисные точки
  • природные объекты

Реализуются через symbol layer с иконками и текстом.

Линейные ориентиры (Linear landmarks)

Используются реже, но важны для навигации:

  • реки
  • магистрали
  • железнодорожные линии

Обычно визуализируются через line layer с акцентной стилизацией.

Площадные ориентиры (Area landmarks)

Крупные объекты, задающие структуру города:

  • парки
  • кварталы
  • озёра
  • кампусы

Реализуются через fill layer или fill-extrusion layer.

3D landmarks (экструдированные здания)

Ключевой элемент современных карт:

  • здания с высотой
  • архитектурные объекты
  • городская застройка

Используется fill-extrusion слой с параметром height.

Базовые механизмы отображения landmarks

Symbol layer как основа POI

Symbol layer объединяет иконки и текст:

map.addLayer({
  id: 'landmarks-symbols',
  type: 'symbol',
  source: 'pois',
  layout: {
    'icon-image': ['get', 'icon'],
    'text-field': ['get', 'name'],
    'text-size': 12,
    'text-offset': [0, 1.2],
    'text-anchor': 'top'
  }
});

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

Fill-extrusion для 3D зданий

3D landmarks создают визуальную глубину карты:

map.addLayer({
  id: '3d-buildings',
  source: 'composite',
  'source-layer': 'building',
  type: 'fill-extrusion',
  minzoom: 14,
  paint: {
    'fill-extrusion-color': '#aaa',
    'fill-extrusion-height': ['get', 'height'],
    'fill-extrusion-base': ['get', 'min_height'],
    'fill-extrusion-opacity': 0.8
  }
});

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

Источники данных для landmarks

GeoJSON источники

Часто используется пользовательский набор данных:

map.addSource('custom-landmarks', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [76.8865, 43.2389]
        },
        properties: {
          name: 'Ориентир',
          icon: 'star'
        }
      }
    ]
  }
});

Векторные тайлы Mapbox

Коммерческая платформа Mapbox предоставляет предсобранные слои:

  • poi_label
  • building
  • road
  • water

Эти слои оптимизированы для быстрого рендеринга и масштабирования.

Управление видимостью landmarks

Фильтрация по зуму

Landmarks часто зависят от масштаба:

layout: {
  'visibility': 'visible'
},
minzoom: 10,
maxzoom: 18

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

Фильтрация по категориям

filter: ['==', ['get', 'type'], 'restaurant']

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

Коллизии и приоритет отображения

Одной из сложных задач является предотвращение наложения подписей и иконок.

Collision detection

layout: {
  'icon-allow-overlap': false,
  'text-allow-overlap': false
}

Mapbox GL JS автоматически перераспределяет элементы, чтобы сохранить читаемость карты.

Приоритеты слоёв

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

  • здания ниже
  • дороги выше зданий
  • POI поверх всего
map.addLayer(layer, 'poi-label');

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

Наведение и выбор объектов

map.on('click', 'landmarks-symbols', (e) => {
  const feature = e.features[0];
  console.log(feature.properties.name);
});

Подсветка выбранного объекта

map.setPaintProperty('landmarks-symbols', 'icon-opacity', [
  'case',
  ['==', ['get', 'id'], selectedId],
  1,
  0.5
]);

Оптимизация производительности

Landmarks напрямую влияют на нагрузку WebGL.

Стратегии оптимизации:

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

Кластеризация точек

map.addSource('pois', {
  type: 'geojson',
  data: geojsonData,
  cluster: true,
  clusterMaxZoom: 14,
  clusterRadius: 50
});

Визуальная иерархия landmarks

Landmarks должны формировать читаемую структуру:

  • крупные ориентиры (stadiums, airports)
  • средние (магазины, учреждения)
  • мелкие (кафе, сервисы)

В Mapbox GL JS это достигается комбинацией:

  • text-size
  • zoom interpolation
  • feature-state
  • style layers order

Динамические landmarks

Feature-state позволяет изменять объекты без перерисовки источника:

map.setFeatureState(
  { source: 'pois', id: 123 },
  { highlighted: true }
);
paint: {
  'text-color': [
    'case',
    ['boolean', ['feature-state', 'highlighted'], false],
    '#ff0000',
    '#000000'
  ]
}

Ландшафтные landmarks и контекст окружения

Landmarks часто зависят от контекста:

  • дневной/ночной стиль карты
  • плотность городской застройки
  • тип слоя (satellite, streets, hybrid)

В темных стилях повышается контраст POI, в светлых — усиливается читаемость текста.

Связь landmarks и навигации

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

  • визуальные подсказки поворотов
  • подтверждение текущего положения
  • ориентация в сложных развязках

Интеграция с маршрутными слоями позволяет синхронизировать геометрию маршрута и POI.

Пользовательские стили landmarks

Стилизация позволяет адаптировать карту под продукт:

  • минималистичные карты (ограниченный POI)
  • туристические карты (расширенные landmarks)
  • аналитические карты (структурные объекты)

Пример настройки цвета иконок:

paint: {
  'icon-color': '#2b6cb0',
  'text-halo-color': '#ffffff',
  'text-halo-width': 1.2
}
Оглавление