Настройка проекции Globe

Проекция globe в Mapbox GL JS представляет собой трёхмерную модель Земли, в которой карта отображается как сфера, а не как плоская проекция Меркатора. Это изменяет не только визуальное восприятие данных, но и поведение камеры, освещения, зума и взаимодействия с пользователем.

Глобальная проекция активируется на уровне конфигурации карты через параметр projection:

mapboxgl.accessToken = 'YOUR_TOKEN';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  projection: 'globe'
});

После этого карта перестаёт быть плоской и начинает рендериться как сфера с корректной геометрией долготы и широты.

Отличие от Web Mercator

По умолчанию Mapbox GL JS использует проекцию Web Mercator, которая:

  • искажает размеры объектов ближе к полюсам
  • ограничивает визуализацию широтами около ±85°
  • работает как бесконечная плоскость

Глобусная проекция:

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

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

Камера и управление видом

При включённой проекции globe камера начинает работать в трёхмерном пространстве. Важные параметры:

  • center — точка фокусировки
  • zoom — приближение к сфере
  • bearing — поворот вокруг вертикальной оси
  • pitch — наклон камеры

Пример настройки начального положения:

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/satellite-streets-v12',
  projection: 'globe',
  center: [30, 50],
  zoom: 2,
  pitch: 30,
  bearing: 0
});

При увеличении pitch глобус визуально «наклоняется», создавая эффект орбитального обзора.

Атмосфера и визуальные эффекты

Глобусная проекция поддерживает атмосферные эффекты, которые усиливают ощущение объёмности:

map.on('load', () => {
  map.setFog({
    color: 'rgb(186, 210, 235)',
    'high-color': 'rgb(36, 92, 223)',
    'horizon-blend': 0.1,
    'space-color': 'rgb(11, 11, 25)',
    'star-intensity': 0.35
  });
});

Fog (туман) отвечает за:

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

Дополнительно может использоваться освещение:

map.setLight({
  anchor: 'map',
  color: 'white',
  intensity: 0.4
});

Поведение зума на глобусе

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

Особенности:

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

Это влияет на UX: пользователь воспринимает карту как объект в пространстве, а не как поверхность.

Ограничения и переходные состояния

При переходе между проекциями возможна анимация:

map.setProjection('globe');

или возврат к Меркатору:

map.setProjection('mercator');

При переключении происходят внутренние трансформации:

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

Важно учитывать, что резкое переключение может вызывать визуальные скачки, поэтому часто используется анимация состояния.

Работа с источниками данных

В глобусной проекции источники данных (sources) ведут себя аналогично плоской карте, но их визуализация подчиняется сферической геометрии.

GeoJSON-слои:

map.addSource('cities', {
  type: 'geojson',
  data: '/data/cities.geojson'
});

map.addLayer({
  id: 'cities-layer',
  type: 'circle',
  source: 'cities',
  paint: {
    'circle-radius': 6,
    'circle-color': '#ff5722'
  }
});

Разница проявляется в:

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

Поведение тайлов и загрузка данных

При globe-проекции система тайлов работает с дополнительной логикой:

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

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

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

События взаимодействия остаются теми же:

  • click
  • mousemove
  • mouseenter
  • mouseleave

Однако координаты событий интерпретируются через сферическую модель:

map.on('click', (e) => {
  console.log(e.lngLat);
});

lngLat остаётся логическим представлением координат на поверхности сферы, несмотря на трёхмерный рендер.

Переходные анимации и орбита камеры

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

function rotate() {
  const center = map.getCenter();
  center.lng += 0.2;
  map.easeTo({ center, duration: 1000, easing: (n) => n });
  requestAnimationFrame(rotate);
}

rotate();

Такой подход создаёт эффект медленного вращения планеты, что усиливает пространственное восприятие.

Практика настройки стиля под глобус

Некоторые визуальные приёмы особенно важны:

  • уменьшение плотности линий на больших масштабах
  • использование мягких цветов для фона воды
  • ограничение ярких контрастов в полярных областях
  • настройка fog, чтобы скрывать резкий край горизонта

Пример стилизации воды:

map.setPaintProperty('water', 'fill-color', '#1a3a5c');

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

Глобусная проекция более ресурсоёмка по сравнению с 2D:

  • увеличивается нагрузка на GPU
  • усложняется отрисовка тайлов
  • возрастает стоимость освещения и fog-эффектов

Практические оптимизации:

  • уменьшение количества активных слоёв
  • использование векторных тайлов вместо растра
  • ограничение сложных фильтров на больших zoom-уровнях
  • упрощение геометрии данных

Особенности работы с высокими широтами

Вблизи полюсов возникают характерные эффекты:

  • сжатие визуального пространства
  • более плотное размещение тайлов
  • необходимость аккуратной настройки label-placement

Текстовые метки могут требовать дополнительных правил:

layout: {
  'text-allow-overlap': false,
  'text-ignore-placement': false
}

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

Комбинирование с 3D terrain

Глобусная проекция может работать вместе с рельефом:

map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });

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

Камера как физическая модель

При globe-режиме камера перестаёт быть абстрактным понятием 2D-сцены и начинает вести себя как наблюдатель в 3D-пространстве:

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

Это требует более внимательной работы с UX-настройками, особенно при переключении состояний карты.

Оглавление