Mapbox GL JS — это JavaScript-библиотека для создания интерактивных веб-карт с аппаратным ускорением через WebGL. Она позволяет отображать карты непосредственно в браузере, работать с векторными тайлами, визуализировать большие объёмы геоданных и создавать сложные картографические интерфейсы без необходимости использовать сторонние графические движки.
Библиотека разработана компанией Mapbox и ориентирована на создание современных картографических приложений, где требуется высокая производительность, плавная анимация и гибкая настройка внешнего вида карты.
Mapbox GL JS используется для:
Ранние веб-карты обычно строились на основе растровых изображений. Карта разбивалась на множество небольших картинок (тайлов), которые загружались по мере перемещения пользователя.
Такой подход имел ряд ограничений:
С развитием браузеров появилась технология WebGL, позволяющая использовать вычислительные возможности видеокарты. Именно на этой основе был создан Mapbox GL JS.
Вместо готовых изображений библиотека работает преимущественно с векторными данными, которые отрисовываются непосредственно в браузере.
Это обеспечивает:
Сокращение GL происходит от термина Graphics Library и напрямую связано с использованием технологии WebGL.
WebGL представляет собой браузерный API для работы с трёхмерной графикой и ускоренной отрисовкой через графический процессор (GPU).
Благодаря WebGL карта:
Mapbox GL JS предоставляет готовый набор инструментов взаимодействия:
Пример:
map.flyTo({
center: [37.6176, 55.7558],
zoom: 12
});Метод flyTo() создаёт плавную анимацию перемещения
камеры.
Одной из ключевых особенностей библиотеки является поддержка Vector Tiles.
Векторный тайл содержит не изображение, а набор геометрических данных:
Во время загрузки браузер получает данные и самостоятельно рисует карту.
Преимущества такого подхода:
Mapbox GL JS использует систему стилей на основе JSON-описаний.
Стиль определяет:
Упрощённая структура стиля:
{
"version": 8,
"sources": {},
"layers": []
}Каждый слой имеет собственные настройки визуализации.
Например:
paint: {
"line-color": "#ff0000",
"line-width": 3
}Архитектура библиотеки строится вокруг нескольких основных компонентов.
Главный объект системы.
Создание карты начинается именно с него.
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v12',
center: [37.6176, 55.7558],
zoom: 10
});Объект Map управляет:
Источник данных.
Источник отвечает за получение информации, которая будет отображаться на карте.
Поддерживаются различные типы источников:
Пример:
map.addSource('cities', {
type: 'geojson',
data: 'cities.geojson'
});Слой отображения.
Слой определяет способ визуализации данных источника.
Один источник может использоваться несколькими слоями одновременно.
Например:
map.addLayer({
id: 'cities-layer',
type: 'circle',
source: 'cities'
});Mapbox GL JS способен работать с различными форматами геоданных.
Наиболее распространённый вариант.
GeoJSON представляет собой JSON-формат для хранения пространственных данных.
Пример точки:
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [37.6176, 55.7558]
}
}Поддерживаются:
Предназначены для больших картографических проектов.
Особенности:
Растровые тайлы содержат готовые изображения.
Применяются для:
Вся визуализация в Mapbox GL JS строится через слои.
Наиболее популярные типы:
| Тип | Назначение |
|---|---|
| circle | Отображение точек |
| line | Отображение линий |
| fill | Отображение полигонов |
| symbol | Подписи и иконки |
| raster | Растровые изображения |
| heatmap | Тепловые карты |
| fill-extrusion | 3D-полигоны |
| hillshade | Рельеф местности |
| background | Фон карты |
Одним из наиболее заметных преимуществ библиотеки является возможность отображения 3D-объектов.
Для этого используется слой типа:
fill-extrusionПример:
map.addLayer({
id: 'buildings',
type: 'fill-extrusion',
source: 'buildings',
paint: {
'fill-extrusion-height': 100,
'fill-extrusion-color': '#888'
}
});Такая технология позволяет отображать:
Mapbox GL JS использует событийную модель программирования.
Наиболее часто применяются события:
map.on('load', () => {
console.log('Карта загружена');
});map.on('click', (event) => {
console.log(event.lngLat);
});Также доступны:
movezoomdragmouseentermouseleavemousemoveresizeidlerenderСобытия позволяют создавать интерактивные интерфейсы и реагировать на действия пользователя.
Для отображения отдельных объектов используются маркеры.
Пример:
new mapboxgl.Marker()
.setLngLat([37.6176, 55.7558])
.addTo(map);Маркер можно сделать:
Для отображения дополнительной информации используются всплывающие окна (Popup).
Пример:
new mapboxgl.Popup()
.setLngLat([37.6176, 55.7558])
.setHTML('<h3>Москва</h3>')
.addTo(map);Popup часто применяется для:
Mapbox GL JS рассматривает карту как виртуальную камеру.
Основные параметры камеры:
| Параметр | Назначение |
|---|---|
| center | Центр карты |
| zoom | Масштаб |
| bearing | Угол поворота |
| pitch | Наклон |
Пример:
map.easeTo({
center: [37.6176, 55.7558],
zoom: 14,
bearing: 45,
pitch: 60
});Это создаёт эффект обзора города под углом.
Высокая производительность обеспечивается несколькими механизмами:
Аппаратное ускорение
Использование GPU позволяет переносить большую часть вычислений на видеокарту.
Векторная отрисовка
Отрисовываются только необходимые элементы карты.
Потоковая загрузка
Тайлы подгружаются по мере необходимости.
Кэширование
Ранее загруженные данные повторно используются без дополнительных запросов.
Основные сильные стороны библиотеки:
Mapbox GL JS широко используется в различных категориях проектов.
Геоинформационные системы (GIS)
Логистика
Транспорт
Аналитика
Городские сервисы
Системы мониторинга
Mapbox GL JS занимает особое место среди картографических библиотек благодаря сочетанию трёх ключевых характеристик:
Такой подход позволяет создавать картографические приложения уровня профессиональных геоинформационных систем непосредственно внутри браузера, используя стандартный JavaScript и современные веб-технологии.