Mapbox

Назначение Mapbox в экосистеме Leaflet

Leaflet является клиентской библиотекой для отображения интерактивных карт, тогда как Mapbox предоставляет инфраструктуру для хранения, генерации и доставки картографических данных. В связке эти технологии позволяют создавать современные веб-карты с собственным дизайном, поддержкой векторных тайлов, геокодированием, маршрутизацией и обработкой пространственных данных.

Mapbox может использоваться в Leaflet в качестве источника картографических слоёв. Вместо стандартных тайлов OpenStreetMap карта получает данные с серверов Mapbox через API.

Основные возможности интеграции:

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

Регистрация и получение Access Token

Для работы с сервисами Mapbox необходим токен доступа.

После регистрации в системе создаётся персональный Access Token, который используется при обращении к API.

Пример токена:

const accessToken = 'pk.eyJ1IjoidXNlciIsImEiOiJjbGFiYzEyMyJ9.example';

Токен передаётся в URL тайлов или в настройки специальных плагинов.

Подключение карты Mapbox как Tile Layer

Наиболее распространённый способ интеграции — использование слоя тайлов.

Создание карты:

const map = L.map('map').setView([55.751244, 37.618423], 10);

Подключение стиля Mapbox:

L.tileLayer(
    'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
    {
        attribution:
            '© Mapbox © OpenStreetMap',
        tileSize: 512,
        zoomOffset: -1,
        id: 'mapbox/streets-v12',
        accessToken: accessToken
    }
).addTo(map);

Здесь:

id — идентификатор стиля;
tileSize — размер тайла;
zoomOffset — корректировка масштаба;
accessToken — ключ доступа.

Создание собственного стиля

Одним из главных преимуществ Mapbox является редактор стилей.

После создания стиля в Mapbox Studio появляется идентификатор:

mapbox://styles/username/clabcdefgh123456789

Для Leaflet используется сокращённый вариант:

id: 'username/clabcdefgh123456789'

Подключение:

L.tileLayer(
    'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
    {
        id: 'username/clabcdefgh123456789',
        accessToken: accessToken
    }
).addTo(map);

Собственные стили позволяют изменять:

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

Использование нескольких базовых карт

Часто требуется переключение между стилями.

Создание слоёв:

const streets = L.tileLayer(
    'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
    {
        id: 'mapbox/streets-v12',
        accessToken: accessToken
    }
);

const satellite = L.tileLayer(
    'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
    {
        id: 'mapbox/satellite-v9',
        accessToken: accessToken
    }
);

Добавление переключателя:

L.control.layers(
    {
        "Улицы": streets,
        "Спутник": satellite
    }
).addTo(map);

Использование Mapbox через плагин Leaflet

Ранее существовал официальный плагин Mapbox.js.

Подключение выглядело следующим образом:

L.mapbox.accessToken = accessToken;

const map = L.mapbox.map(
    'map',
    'mapbox.streets'
);

Однако в современных проектах предпочтительно использовать стандартный L.tileLayer() и API Mapbox напрямую.

Работа с GeoJSON поверх карты Mapbox

Mapbox предоставляет базовую карту, а Leaflet отвечает за отображение пользовательских данных.

Пример:

fetch('data.geojson')
    .then(response => response.json())
    .then(data => {
        L.geoJSON(data).addTo(map);
    });

Такая схема используется практически во всех ГИС-приложениях.

На карте можно отображать:

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

Геокодирование через Mapbox Geocoding API

Геокодирование позволяет получать координаты по адресу.

Запрос:

const query = 'Москва';

fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${query}.json?access_token=${accessToken}`
)
.then(response => response.json())
.then(data => {
    console.log(data);
});

Результат содержит:

{
    center: [37.6176, 55.7558]
}

Получение координат:

const coordinates =
    data.features[0].center;

Обратное геокодирование

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

Пример:

const lng = 37.6176;
const lat = 55.7558;

fetch(
`https://api.mapbox.com/geocoding/v5/mapbox.places/${lng},${lat}.json?access_token=${accessToken}`
)
.then(response => response.json())
.then(data => {
    console.log(data.features[0].place_name);
});

Поиск адресов на карте

Часто используется отдельный элемент поиска.

Пример создания маркера после поиска:

function showPlace(lat, lng) {

    map.setView([lat, lng], 14);

    L.marker([lat, lng])
        .addTo(map);
}

После получения координат из Geocoding API выполняется центрирование карты.

Маршрутизация с использованием Mapbox Directions API

Mapbox предоставляет сервис построения маршрутов.

Пример запроса:

const start = '37.6176,55.7558';
const end = '30.3141,59.9386';

fetch(
`https://api.mapbox.com/directions/v5/mapbox/driving/${start};${end}?geometries=geojson&access_token=${accessToken}`
)
.then(response => response.json())
.then(data => {
    console.log(data);
});

Ответ содержит:

длину маршрута;
время поездки;
последовательность координат;
пошаговые инструкции.

Отображение маршрута на карте

Полученные координаты можно преобразовать в линию.

const route =
    data.routes[0].geometry.coordinates;

const latlngs = route.map(
    point => [point[1], point[0]]
);

L.polyline(latlngs, {
    color: 'blue',
    weight: 5
}).addTo(map);

Использование спутниковых карт

Спутниковые снимки особенно востребованы в:

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

Подключение:

L.tileLayer(
'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token={accessToken}',
{
    tileSize: 512,
    zoomOffset: -1,
    accessToken: accessToken
}
).addTo(map);

Ограничение области просмотра

Для некоторых приложений необходимо запретить выход за пределы определённого региона.

const bounds = [
    [54.5, 36.5],
    [56.5, 39.5]
];

map.setMaxBounds(bounds);

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

Кэширование тайлов

Leaflet автоматически хранит загруженные тайлы в памяти браузера.

Mapbox дополнительно использует HTTP-кэширование.

Преимущества:

уменьшение сетевого трафика;
ускорение загрузки;
снижение количества запросов к API.

Ограничения тарифов Mapbox

При использовании сервиса необходимо учитывать:

количество просмотров карты;
число запросов геокодирования;
обращения к Directions API;
использование спутниковых данных;
нагрузку на API.

Контроль осуществляется через панель управления аккаунтом.

Оптимизация производительности

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

При большом количестве объектов:

const map = L.map('map', {
    preferCanvas: true
});

Кластеризация маркеров

const markers = L.markerClusterGroup();

markers.addLayer(
    L.marker([55.75, 37.61])
);

map.addLayer(markers);

Снижается нагрузка на браузер при работе с тысячами точек.

Ленивая загрузка данных

Данные загружаются только после изменения области просмотра:

map.on('moveend', loadData);

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

Безопасность Access Token

Токен доступа не является секретом уровня серверного пароля, однако требует контроля.

Рекомендуется:

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

Архитектура интеграции Leaflet и Mapbox

Типичная схема взаимодействия выглядит следующим образом:

Пользователь
      │
      ▼
    Leaflet
      │
      ├── Mapbox Tiles API
      │
      ├── Geocoding API
      │
      ├── Directions API
      │
      └── Пользовательские GeoJSON

Leaflet отвечает за визуализацию и взаимодействие с картой, а Mapbox предоставляет картографическую инфраструктуру, стили, пространственные сервисы и набор API для построения полнофункциональных геоинформационных веб-приложений.