Система проекций в MapLibre GL JS определяет, как географические координаты (долгота, широта) преобразуются в экранное пространство и каким образом плоская или сферическая модель мира отображается пользователю. В основе большинства веб-карт традиционно лежит проекция Web Mercator (EPSG:3857), однако современные графические возможности позволяют использовать и альтернативные модели, включая глобусную визуализацию и пользовательские преобразования координат.
Векторные и растровые тайлы в MapLibre GL JS чаще всего публикуются в системе EPSG:3857. Это псевдосферическая проекция, в которой Земля «развёрнута» на плоскость с сохранением углов, но с искажением площадей, особенно заметным на высоких широтах.
Ключевые свойства Web Mercator:
Внутренне библиотека оперирует преобразованием:
Это обеспечивает совместимость с подавляющим большинством источников тайлов и стилевых спецификаций.
Современные версии MapLibre GL JS поддерживают выбор проекции на
уровне инициализации карты. Основная конфигурация задаётся через
параметр projection:
import maplibregl from "maplibre-gl";
const map = new maplibregl.Map({
container: "map",
style: "https://demotiles.maplibre.org/style.json",
center: [30, 50],
zoom: 3,
projection: {
type: "mercator"
}
});Значение "mercator" соответствует классической плоской
карте и используется по умолчанию, если параметр не задан.
Одним из наиболее значимых расширений визуальной модели стала поддержка глобуса. В этом режиме карта перестаёт быть плоской и визуализируется как трёхмерная сфера.
const map = new maplibregl.Map({
container: "map",
style: "https://demotiles.maplibre.org/style.json",
center: [0, 20],
zoom: 1,
projection: {
type: "globe"
}
});Глобусная модель влияет не только на рендеринг, но и на поведение камеры:
Глобусная проекция часто сопровождается дополнительными слоями атмосферы и освещения:
Эти эффекты формируют восприятие реального космического вида Земли и уменьшают когнитивные искажения при работе с большими масштабами.
В плоской проекции Web Mercator мир фактически «разрезан» по 180° долготы. Это создаёт проблемы при:
MapLibre решает это через:
В глобусной проекции эта проблема исчезает, поскольку поверхность непрерывна.
Хотя встроенные режимы ограничены набором стандартных моделей, архитектура MapLibre допускает расширение поведения через низкоуровневые интерфейсы и математические преобразования координат.
Векторный пайплайн включает стадии:
В пользовательских сценариях можно вмешиваться в этапы трансформации через:
Пример кастомного слоя, визуально трансформирующего пространство:
const customLayer = {
id: "custom-transform",
type: "custom",
renderingMode: "3d",
onAdd(map, gl) {
this.map = map;
this.gl = gl;
},
render(gl, matrix) {
// matrix содержит проекцию камеры
// здесь можно применять дополнительные трансформации
}
};Хотя это не меняет базовую проекцию напрямую, подобный подход позволяет имитировать альтернативные геометрические модели.
Различия между двумя основными режимами проявляются не только визуально, но и в математике камеры.
Переход между режимами влияет на:
Разные типы слоёв ведут себя по-разному в зависимости от выбранной проекции:
Особое внимание требуется при работе с:
Камера в MapLibre GL JS описывается матрицами:
В Mercator-режиме используется классическая матрица перспективной проекции, тогда как в globe-режиме добавляется сферическая модель, где камера фактически вращается вокруг центра Земли.
Основные параметры:
В глобусной проекции pitch ограничивается физическими свойствами сферы, что исключает «переворот» карты в бесконечность.
Выбор модели отображения влияет на архитектуру приложения:
Дополнительно учитываются:
Несмотря на гибкость, система проекций имеет ограничения:
При этом архитектура остаётся расширяемой через слои и камеры, что позволяет адаптировать визуализацию под специализированные задачи.