Слои и их типы

Система отображения данных в MapLibre GL JS построена вокруг концепции слоёв (layers). Каждый слой отвечает за визуализацию определённого набора данных и определяет, каким образом эти данные отображаются на карте.

Источник данных (source) и слой (layer) являются разными сущностями:

источник содержит данные;
слой определяет способ их отображения.

Один источник может использоваться несколькими слоями одновременно. Например, один набор геометрий может отображаться как полигоны, контуры и подписи.

map.addSource('cities', {
    type: 'geojson',
    data: 'cities.geojson'
});

map.addLayer({
    id: 'city-circles',
    type: 'circle',
    source: 'cities'
});

map.addLayer({
    id: 'city-labels',
    type: 'symbol',
    source: 'cities'
});

В данном примере один GeoJSON-источник отображается двумя различными слоями.

Основные свойства слоя

При создании слоя используется объект конфигурации.

map.addLayer({
    id: 'roads',
    type: 'line',
    source: 'transport'
});

Наиболее важные свойства:

Свойство	Назначение
`id`	Уникальный идентификатор слоя
`type`	Тип визуализации
`source`	Источник данных
`source-layer`	Слой внутри векторного тайла
`layout`	Параметры компоновки
`paint`	Параметры отрисовки
`filter`	Фильтрация объектов
`minzoom`	Минимальный масштаб отображения
`maxzoom`	Максимальный масштаб отображения

Пример:

map.addLayer({
    id: 'highways',
    type: 'line',
    source: 'roads',
    paint: {
        'line-color': '#ff6600',
        'line-width': 4
    },
    minzoom: 8,
    maxzoom: 22
});

Типы слоёв

MapLibre GL JS поддерживает несколько типов слоёв, предназначенных для отображения различных видов данных.

Основные типы:

background
fill
line
symbol
circle
heatmap
fill-extrusion
raster
hillshade

Каждый тип имеет собственный набор параметров и применяется для решения определённых задач.

Слой background

Тип background используется для отображения фоновой заливки всей карты.

Такой слой не требует источника данных.

map.addLayer({
    id: 'background',
    type: 'background',
    paint: {
        'background-color': '#f5f5f5'
    }
});

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

paint: {
    'background-color': '#dceeff',
    'background-opacity': 0.8
}

Часто применяется:

для однотонных карт;
для кастомных тем оформления;
как базовый слой перед добавлением остальных элементов.

Слой fill

Тип fill предназначен для отображения полигонов.

Типичные объекты:

страны;
области;
земельные участки;
озёра;
парки.

Пример:

map.addLayer({
    id: 'regions',
    type: 'fill',
    source: 'regions',
    paint: {
        'fill-color': '#4CAF50',
        'fill-opacity': 0.6
    }
});

Цвет заливки

'fill-color': '#2196F3'

Прозрачность

'fill-opacity': 0.5

Контур полигона

'fill-outline-color': '#000000'

Полный пример:

map.addLayer({
    id: 'parks',
    type: 'fill',
    source: 'parks',
    paint: {
        'fill-color': '#7cb342',
        'fill-opacity': 0.7,
        'fill-outline-color': '#558b2f'
    }
});

Слой line

Тип line используется для отображения линейных объектов.

Подходит для:

дорог;
рек;
маршрутов;
административных границ;
инженерных коммуникаций.

Пример:

map.addLayer({
    id: 'roads',
    type: 'line',
    source: 'roads',
    paint: {
        'line-color': '#ff9800',
        'line-width': 3
    }
});

Толщина линии

'line-width': 5

Цвет линии

'line-color': '#ff0000'

Прозрачность

'line-opacity': 0.8

Пунктирная линия

'line-dasharray': [2, 2]

Скруглённые соединения

layout: {
    'line-join': 'round',
    'line-cap': 'round'
}

Пример маршрута:

map.addLayer({
    id: 'route',
    type: 'line',
    source: 'route-source',
    layout: {
        'line-cap': 'round',
        'line-join': 'round'
    },
    paint: {
        'line-color': '#1976d2',
        'line-width': 6
    }
});

Слой symbol

Тип symbol отвечает за отображение текстов и иконок.

Наиболее распространённый тип для:

названий городов;
названий улиц;
маркеров объектов;
подписей.

Пример текстовых подписей:

map.addLayer({
    id: 'city-labels',
    type: 'symbol',
    source: 'cities',
    layout: {
        'text-field': ['get', 'name'],
        'text-size': 14
    }
});

Использование иконок

layout: {
    'icon-image': 'airport'
}

Одновременное отображение текста и иконки

layout: {
    'icon-image': 'airport',
    'text-field': ['get', 'name']
}

Цвет текста

paint: {
    'text-color': '#333333'
}

Контур текста

paint: {
    'text-halo-color': '#ffffff',
    'text-halo-width': 2
}

Полный пример:

map.addLayer({
    id: 'airports',
    type: 'symbol',
    source: 'airports',
    layout: {
        'icon-image': 'airport',
        'text-field': ['get', 'name'],
        'text-offset': [0, 1.5],
        'text-anchor': 'top'
    },
    paint: {
        'text-color': '#222222',
        'text-halo-color': '#ffffff',
        'text-halo-width': 2
    }
});

Слой circle

Тип circle отображает точки в виде окружностей.

Подходит для:

населённых пунктов;
датчиков;
станций;
объектов мониторинга;
статистических данных.

Пример:

map.addLayer({
    id: 'cities',
    type: 'circle',
    source: 'cities',
    paint: {
        'circle-radius': 8,
        'circle-color': '#e91e63'
    }
});

Радиус

'circle-radius': 10

Цвет

'circle-color': '#2196f3'

Обводка

'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'

Прозрачность

'circle-opacity': 0.7

Полный пример:

map.addLayer({
    id: 'stations',
    type: 'circle',
    source: 'stations',
    paint: {
        'circle-radius': 7,
        'circle-color': '#ff5722',
        'circle-stroke-width': 2,
        'circle-stroke-color': '#ffffff'
    }
});

Слой heatmap

Тип heatmap предназначен для построения тепловых карт.

Применяется для визуализации:

плотности населения;
транспортных потоков;
концентрации событий;
телеметрии.

Пример:

map.addLayer({
    id: 'heat',
    type: 'heatmap',
    source: 'events'
});

Настройка интенсивности:

paint: {
    'heatmap-intensity': 2
}

Настройка радиуса:

paint: {
    'heatmap-radius': 30
}

Настройка прозрачности:

paint: {
    'heatmap-opacity': 0.8
}

Комплексный пример:

map.addLayer({
    id: 'population-heatmap',
    type: 'heatmap',
    source: 'population',
    paint: {
        'heatmap-radius': 25,
        'heatmap-intensity': 1.5,
        'heatmap-opacity': 0.9
    }
});

Слой fill-extrusion

Тип fill-extrusion используется для построения трёхмерных объектов.

Наиболее часто применяется для отображения:

зданий;
сооружений;
промышленных объектов;
геологических моделей.

Пример:

map.addLayer({
    id: 'buildings',
    type: 'fill-extrusion',
    source: 'buildings',
    paint: {
        'fill-extrusion-color': '#aaaaaa',
        'fill-extrusion-height': ['get', 'height']
    }
});

Высота объекта

'fill-extrusion-height': 100

Базовая высота

'fill-extrusion-base': 10

Цвет

'fill-extrusion-color': '#607d8b'

Прозрачность

'fill-extrusion-opacity': 0.8

Пример отображения зданий:

map.addLayer({
    id: '3d-buildings',
    type: 'fill-extrusion',
    source: 'buildings',
    paint: {
        'fill-extrusion-color': '#9e9e9e',
        'fill-extrusion-height': ['get', 'height'],
        'fill-extrusion-opacity': 0.85
    }
});

Слой raster

Тип raster используется для отображения растровых тайлов.

Источником могут быть:

спутниковые снимки;
аэрофотосъёмка;
погодные карты;
сканированные карты.

Пример подключения:

map.addSource('satellite', {
    type: 'raster',
    tiles: [
        'https://server.example.com/{z}/{x}/{y}.png'
    ],
    tileSize: 256
});

map.addLayer({
    id: 'satellite',
    type: 'raster',
    source: 'satellite'
});

Настройки прозрачности:

paint: {
    'raster-opacity': 0.7
}

Настройки яркости:

paint: {
    'raster-brightness-min': 0.2,
    'raster-brightness-max': 1
}

Слой hillshade

Тип hillshade предназначен для визуализации рельефа на основе цифровой модели высот.

Используется для:

топографических карт;
туристических карт;
геологических приложений;
анализа местности.

Пример:

map.addLayer({
    id: 'terrain',
    type: 'hillshade',
    source: 'dem'
});

Настройка теней:

paint: {
    'hillshade-shadow-color': '#444444'
}

Настройка освещения:

paint: {
    'hillshade-highlight-color': '#ffffff'
}

Настройка средней зоны:

paint: {
    'hillshade-accent-color': '#999999'
}

Порядок отображения слоёв

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

map.addLayer(backgroundLayer);
map.addLayer(roadsLayer);
map.addLayer(labelsLayer);

В данном случае:

фон находится внизу;
дороги располагаются поверх фона;
подписи находятся поверх дорог.

Для вставки слоя перед другим используется второй параметр метода addLayer.

map.addLayer(
    newLayer,
    'labels'
);

Новый слой будет вставлен непосредственно перед слоем labels.

Управление существующими слоями

Получение слоя:

const layer = map.getLayer('roads');

Удаление:

map.removeLayer('roads');

Проверка существования:

if (map.getLayer('roads')) {
    console.log('Слой найден');
}

Изменение параметров отображения:

map.setPaintProperty(
    'roads',
    'line-color',
    '#ff0000'
);

Изменение параметров компоновки:

map.setLayoutProperty(
    'roads',
    'visibility',
    'none'
);

Отображение обратно:

map.setLayoutProperty(
    'roads',
    'visibility',
    'visible'
);

Фильтрация объектов внутри слоя

Слой может отображать только часть объектов источника.

Пример отображения только крупных городов:

map.addLayer({
    id: 'large-cities',
    type: 'circle',
    source: 'cities',
    filter: [
        '>',
        ['get', 'population'],
        1000000
    ]
});

Фильтрация по типу объекта:

filter: [
    '==',
    ['get', 'type'],
    'capital'
]

Фильтрация по нескольким условиям:

filter: [
    'all',
    ['==', ['get', 'country'], 'France'],
    ['>', ['get', 'population'], 500000]
]

Подобный подход позволяет использовать один источник данных для множества специализированных слоёв.

Комбинирование различных типов слоёв

Одной из сильных сторон MapLibre GL JS является возможность одновременно использовать несколько типов визуализации.

Пример комплексной карты:

// Спутниковая подложка
raster

// Здания
fill-extrusion

// Дороги
line

// Парки
fill

// Города
circle

// Подписи
symbol

Подобная структура широко применяется в современных веб-ГИС и позволяет создавать многоуровневые интерактивные карты с высокой производительностью и гибкой настройкой внешнего вида каждого набора пространственных данных.