Базовый стиль в MapLibre GL JS определяет визуальную структуру карты: какие слои отображаются, из каких источников поступают данные, как интерпретируются геометрии и каким образом применяются визуальные свойства. Вся система рендеринга в MapLibre опирается на единый JSON-документ стиля, который описывает источники данных, слои, фильтры, шрифты, спрайты и правила отображения.
Ключевая идея заключается в разделении данных и визуального представления. Источники (sources) предоставляют геометрию, а стили (layers) определяют, как эти данные должны быть отрисованы. Такая архитектура позволяет динамически переключать внешний вид карты без изменения самих данных.
Стиль в MapLibre GL JS представляет собой объект, соответствующий спецификации Mapbox Style Specification. Он включает несколько обязательных компонентов:
Пример минимального стиля:
{
"version": 8,
"sources": {
"osm": {
"type": "vector",
"url": "https://example.com/tiles.json"
}
},
"layers": []
}Даже в таком минимальном виде карта уже может быть создана, но без слоёв она не будет отображать визуальные данные.
Стиль передаётся при инициализации карты или изменяется динамически через API.
import maplibregl from "maplibre-gl";
const map = new maplibregl.Map({
container: "map",
style: {
version: 8,
sources: {},
layers: []
},
center: [37.6173, 55.7558],
zoom: 10
});Чаще используется загрузка стиля по URL:
const map = new maplibregl.Map({
container: "map",
style: "https://demotiles.maplibre.org/style.json",
center: [0, 0],
zoom: 2
});URL-стиль позволяет централизованно управлять визуализацией карты, обновляя JSON без изменения клиентского кода.
Источники являются фундаментом любого стиля. Они определяют, откуда берутся географические данные.
Наиболее распространённые типы:
Пример векторного источника:
"sources": {
"streets": {
"type": "vector",
"url": "https://tiles.server.com/streets.json"
}
}Пример GeoJSON источника:
"sources": {
"points": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [30, 60]
}
}
]
}
}
}GeoJSON часто используется для динамических данных, тогда как vector tiles оптимальны для больших наборов информации.
Слои определяют, как именно данные из sources отображаются на карте. Каждый слой связан с источником и типом визуализации.
Основные типы слоёв:
Пример слоя линий:
{
"id": "roads",
"type": "line",
"source": "streets",
"source-layer": "road",
"paint": {
"line-color": "#ff0000",
"line-width": 2
}
}Каждый слой имеет:
Слои в MapLibre отрисовываются в строгом порядке: от первого к последнему. Это означает, что порядок в массиве layers напрямую влияет на визуальную композицию.
Например:
"layers": [
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#e0e0e0"
}
},
{
"id": "water",
"type": "fill",
"source": "streets",
"source-layer": "water",
"paint": {
"fill-color": "#a0c8f0"
}
}
]Фон будет отрисован первым, затем водные объекты поверх него.
Базовый стиль часто включает набор стандартных слоёв:
Такая структура отражает классическую картографическую модель, где каждый уровень детализации отделён в отдельный слой.
MapLibre GL JS позволяет менять стиль на лету, что используется для переключения тем (светлая/тёмная), смены поставщика тайлов или визуальной переработки карты.
map.setStyle("https://demotiles.maplibre.org/style-dark.json");При смене стиля происходит полная перезагрузка графа рендеринга, включая источники и слои.
Важно учитывать:
Для восстановления используется событие:
map.on("styledata", () => {
map.addSource("custom", {
type: "geojson",
data: "/data.geojson"
});
map.addLayer({
id: "custom-layer",
type: "circle",
source: "custom",
paint: {
"circle-radius": 6,
"circle-color": "#ff0000"
}
});
});Цветовая схема базового стиля определяет восприятие карты. Обычно выделяются две основные категории:
Смена темы затрагивает:
Пример определения фона:
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#ffffff"
}
}И для тёмной темы:
{
"id": "background",
"type": "background",
"paint": {
"background-color": "#0b0f14"
}
}MapLibre поддерживает expression-синтаксис, позволяющий динамически изменять стили в зависимости от масштаба, атрибутов и условий.
Пример изменения ширины линии в зависимости от zoom:
"line-width": [
"interpolate",
["linear"],
["zoom"],
5, 1,
10, 3,
15, 8
]Такой подход позволяет создавать адаптивные стили, которые подстраиваются под уровень детализации.
Базовые стили часто используют фильтрацию по zoom level:
"minzoom": 5,
"maxzoom": 12Это позволяет скрывать или показывать слои в зависимости от масштаба карты. Например:
Создание собственного базового стиля начинается с формирования JSON-структуры, совместимой со спецификацией.
Типичная архитектура включает:
Пример подключения шрифтов:
"glyphs": "https://fonts.server.com/{fontstack}/{range}.pbf"Пример спрайтов:
"sprite": "https://assets.server.com/sprites/sprite"MapLibre предоставляет методы для манипуляции стилем после загрузки карты:
map.getStyle();
map.addSource();
map.removeSource();
map.addLayer();
map.moveLayer();
map.setLayoutProperty();
map.setPaintProperty();Изменение цвета слоя:
map.setPaintProperty("roads", "line-color", "#00ff00");Изменение видимости:
map.setLayoutProperty("roads", "visibility", "none");Внутри MapLibre стиль можно рассматривать как иерархическую систему:
Эта структура определяет весь цикл рендеринга карты — от данных до пикселей на экране.
Корректно построенный базовый стиль напрямую влияет на производительность:
Особенно критично количество symbol-слоёв, так как текстовые подписи требуют значительных ресурсов рендеринга.
MapLibre GL JS использует открытую спецификацию, совместимую с Mapbox Style Specification. Это позволяет:
Однако некоторые проприетарные расширения Mapbox могут быть недоступны, поэтому базовые стили должны опираться на стандартные возможности спецификации.