Metadata и центрирование

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

Метаданные стиля

Стиль карты в Mapbox GL JS описывается JSON-структурой, которая может содержать поле metadata. Это поле используется для хранения произвольной информации, связанной со стилем:

{
  "version": 8,
  "name": "Custom Style",
  "metadata": {
    "theme": "dark",
    "createdBy": "team-map",
    "revision": 3
  }
}

Доступ к этим данным осуществляется через объект стиля карты:

map.getStyle().metadata

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

map.setStyle(newStyle);

метаданные полностью заменяются вместе со стилем, так как стиль интерпретируется как единый атомарный объект.

Метаданные источников данных (sources)

Источники данных в Mapbox GL JS (GeoJSON, vector tiles, raster tiles) также могут нести сопутствующую информацию. Особенно это характерно для GeoJSON-источников, где свойства объектов выступают в роли прикладных метаданных.

map.addSource('cities', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [71.4304, 51.1282]
        },
        properties: {
          name: 'City Center',
          population: 1000000,
          importance: 'high'
        }
      }
    ]
  }
});

В данном случае properties являются метаданными объекта и используются для:

  • фильтрации через filter
  • стилизации через paint и layout
  • построения выражений (expressions)

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

map.addLayer({
  id: 'cities-layer',
  type: 'circle',
  source: 'cities',
  paint: {
    'circle-radius': [
      'interpolate',
      ['linear'],
      ['get', 'population'],
      100000, 5,
      1000000, 15
    ]
  }
});

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

Mapbox GL JS не предоставляет отдельного API для «частичного обновления метаданных стиля», однако обновление источников позволяет изменять прикладные данные в реальном времени:

const source = map.getSource('cities');

source.setData(updatedGeojson);

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

Центрирование карты и камера

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

Центр карты (center)

Основной метод задания центра карты:

map.setCenter([71.4304, 51.1282]);

или при инициализации:

const map = new mapboxgl.Map({
  container: 'map',
  center: [71.4304, 51.1282],
  zoom: 10
});

Центр задаётся в формате [longitude, latitude] и определяет географическую точку, которая проецируется в центр viewport.

Получение текущего центра:

map.getCenter();

возвращает объект LngLat.

Центрирование с анимацией

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

map.easeTo({
  center: [71.4304, 51.1282],
  duration: 1500
});

или:

map.flyTo({
  center: [71.4304, 51.1282],
  zoom: 12
});

Разница заключается в характере движения:

  • easeTo — плавная интерполяция без географической траектории
  • flyTo — анимация с «полётом» по дуге сферы

Центрирование по границам (fitBounds)

Одним из наиболее важных механизмов центрирования является автоматическое вписывание области в экран:

map.fitBounds([
  [71.0, 51.0],
  [72.0, 52.0]
]);

Алгоритм вычисляет:

  • оптимальный центр
  • необходимый zoom
  • учёт соотношения сторон viewport

Дополнительные параметры:

map.fitBounds(bounds, {
  padding: 40,
  maxZoom: 14,
  duration: 1000
});

padding влияет на смещение области внутри экрана, обеспечивая визуальные отступы.

Камера и внутренние координаты центра

Внутреннее представление камеры хранится в объекте трансформации:

map.transform.center

Этот центр используется для расчёта:

  • матрицы проекции
  • положения тайлов
  • экранных координат

Mapbox GL JS использует проекцию Web Mercator, где центр влияет на развертку всей сцены.

Смещение центра и пиксельная коррекция

Центр может быть смещён относительно геометрического центра viewport:

map.easeTo({
  center: [71.4304, 51.1282],
  offset: [100, 0]
});

Параметр offset позволяет компенсировать UI-элементы или создавать эффект «смещённой камеры».

Ограничение области центрирования

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

map.setMaxBounds([
  [70.0, 50.0],
  [73.0, 53.0]
]);

Это влияет на все операции центрирования, включая:

  • setCenter
  • flyTo
  • fitBounds

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

Центрирование и масштабирование в связке

Центр всегда рассматривается совместно с zoom, pitch и bearing:

map.setCenter([71.4304, 51.1282]);
map.setZoom(11);
map.setBearing(30);
map.setPitch(45);

Каждый параметр влияет на итоговую композицию:

  • zoom определяет масштаб отображения
  • bearing задаёт поворот карты
  • pitch вводит перспективное наклонение

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

Проекция координат и центр экрана

Преобразование между географическими и экранными координатами:

map.project([71.4304, 51.1282]);

возвращает пиксельные координаты относительно viewport.

Обратное преобразование:

map.unproject([x, y]);

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

Геометрический центр viewport

В отличие от географического центра, экранный центр всегда фиксирован:

const screenCenter = [
  map.getCanvas().width / 2,
  map.getCanvas().height / 2
];

Однако его географический аналог меняется при каждом изменении камеры.

Центрирование при вращении мира

При значительных значениях bearing и использовании wrap-around координат центр может переходить через границы меридиана. Mapbox GL JS нормализует координаты, сохраняя непрерывность сцены:

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

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

Оглавление