Координатная модель в веб-картографии строится вокруг строгого разделения географических координат и экранного представления. В системе, используемой в Mapbox GL JS, базовым пространством является WGS84, где каждая точка задаётся парой значений долготы и широты. Порядок критически важен: сначала долгота, затем широта. Такое представление соответствует стандарту GeoJSON и используется во всех низкоуровневых API библиотеки.
Система WGS84 (EPSG:4326) задаёт положение точки на эллипсоиде Земли:
Долгота определяет положение относительно нулевого меридиана, широта — относительно экватора. Именно эта система используется при описании данных в GeoJSON, источниках (sources) и при взаимодействии с API карты.
Ключевая особенность модели в том, что географические координаты не являются линейными: расстояние в градусах не соответствует фиксированным метрам на поверхности Земли. Это создаёт необходимость проекции при визуализации.
В визуализации Mapbox GL JS используется проекция Web Mercator (EPSG:3857). Она преобразует сферические координаты в плоское пространство, пригодное для отрисовки на экране.
Web Mercator обладает следующими характеристиками:
Математически широта преобразуется через логарифмическую функцию, что приводит к экспоненциальному росту искажений ближе к полюсам. Это ограничивает практическую область отображения примерно диапазоном ±85.0511° широты.
В API используется объект LngLat, инкапсулирующий пару координат:
Этот объект обеспечивает нормализацию значений. Например, долгота может выходить за пределы ±180°, что допустимо в математическом смысле, но требует приведения к стандартному диапазону для корректного отображения.
Нормализация выполняет «зацикливание» мира по оси долготы. Это важно для глобальных карт, где пользователь может перемещаться через антимеридиан.
Особое значение имеет обработка широты: значения за пределами допустимого диапазона ограничиваются, поскольку проекция не определена для полюсов.
Внутри системы координат карты существует промежуточное пространство — координаты в пикселях относительно контейнера карты. Преобразование выполняется методом project:
Эта операция переводит географическую точку в координаты слоя рендеринга. Ось X увеличивается вправо, ось Y — вниз, что соответствует стандартной системе координат браузера.
Пример концептуального преобразования:
Обратная операция выполняется методом unproject, позволяющим определить географические координаты по позиции курсора или пикселя.
Это ключевой механизм для интерактивности: определение точки клика, drag-событий, построения объектов на карте.
В системе Web Mercator используется дискретно-непрерывная шкала зума. Каждый уровень увеличения соответствует удвоению детализации по тайлам.
При зуме z карта разбивается на сетку:
Координаты преобразуются таким образом, что при увеличении зума происходит перерасчёт масштаба без смены географической основы.
Это напрямую влияет на точность преобразований project/unproject, поскольку пиксельная плотность растёт экспоненциально.
Границы карты задаются через LngLatBounds — прямоугольник, определяемый двумя точками:
Этот объект используется для:
При вычислении границ важно учитывать пересечение антимеридиана. В случае, когда западная долгота больше восточной (например, 170° и −170°), требуется специальная логика интерпретации «обёрнутого» прямоугольника.
Все пространственные данные в Mapbox GL JS передаются через GeoJSON. Основные типы:
Каждая геометрия использует порядок [lng, lat]. Ошибка в порядке координат является одной из наиболее частых причин некорректного отображения данных.
GeoJSON служит связующим слоем между данными и визуализацией. Источники (sources) принимают геометрию, а слои (layers) определяют стиль её отображения.
Интерактивная модель карты возвращает координаты события в двух пространствах одновременно:
Это позволяет строить обратные связи между UI и географией.
При клике по карте происходит последовательность преобразований:
Таким образом, пользовательское взаимодействие всегда связывается с реальной географической моделью.
Особый случай возникает при работе с координатами около ±180°. При пересечении линии смены дат возникает разрыв в линейной интерпретации координат.
Система решает эту проблему через:
Это позволяет отображать линии и полигоны, пересекающие Тихий океан, без визуальных разрывов.
При работе с координатами возникают ограничения точности:
Особенно заметно это при:
Для минимизации ошибок применяются стабилизированные вычисления в пиксельном пространстве, а не в географическом.
В основе рендеринга лежит тайловая сетка. Каждая координата преобразуется в индекс тайла:
Эта схема позволяет загружать только видимую часть карты, оптимизируя сеть и память.
Тайлы становятся промежуточным слоем между географией и визуальными объектами.
Хотя система координат нелинейна, часто требуется вычисление:
Эти вычисления выполняются в географическом пространстве с учётом кривизны Земли. Линии между точками часто интерпретируются как геодезические дуги, а не прямые линии в проекции.
Параметры камеры задаются через:
Центр карты всегда хранится в географических координатах, но визуально преобразуется в экранное пространство через цепочку проекций.
При изменении центра происходит перерасчёт всех зависимых слоёв, включая источники данных и их визуальное положение.
Слои в системе рендеринга не работают напрямую с географией. Они получают уже преобразованные координаты в пространстве проекции. Это позволяет:
Таким образом, координаты проходят полный цикл:
географическая модель → проекция → тайлы → экранное пространство → взаимодействие → обратная проекция → географическая модель