Офлайн-режим в веб-картографии строится вокруг принципа локального хранения геоданных и тайлов, а также перехвата сетевых запросов. В контексте Leaflet ключевая задача заключается в замене стандартного сетевого получения тайлов на контролируемые источники: кэш браузера, локальную базу данных или заранее подготовленные наборы карт.
Базовая архитектура офлайн-карты включает три слоя:
L.Map)Главное отличие от онлайн-режима заключается в том, что источник тайлов становится предсказуемым и локальным, а не внешним HTTP-сервисом.
Leaflet использует классическую XYZ-схему тайлов:
/{z}/{x}/{y}.pngгде:
z — уровень масштабаx, y — координаты тайлаОфлайн-режим фактически требует полного или частичного предвычисления этого пространства.
Ключевые ограничения:
zПри планировании офлайн-карты критическим параметром становится
максимальный zoom. Разница между z=12 и z=16 —
это не линейный, а квадратичный рост объёма данных.
Современный офлайн-режим чаще всего опирается на Cache API, который используется внутри Service Worker.
Типовая схема работы:
Пример логики Service Worker:
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
if (url.pathname.includes('/tiles/')) {
event.respondWith(
caches.match(event.request).then((cached) => {
if (cached) return cached;
return fetch(event.request).then((response) => {
const clone = response.clone();
caches.open('tiles-cache').then((cache) => {
cache.put(event.request, clone);
});
return response;
});
})
);
}
});Такой подход создаёт прозрачную подмену источника данных без изменения кода Leaflet.
Service Worker работает как прокси между браузером и сетью, что позволяет полностью изолировать Leaflet от логики офлайн-хранения.
Leaflet продолжает использовать стандартный L.TileLayer,
например:
L.tileLayer('/tiles/{z}/{x}/{y}.png', {
maxZoom: 18,
minZoom: 10
}).addTo(map);Разница заключается в том, что запросы к /tiles/...
перехватываются Service Worker.
Особенности интеграции:
Офлайн-режим невозможен без этапа предварительного наполнения кэша.
Основные стратегии:
Задаётся прямоугольная область:
Далее происходит конвертация координат в tile-range.
Каждый zoom увеличивает количество тайлов:
Практически всегда используется ограничение:
Загрузка тайлов часто выполняется пакетами:
Помимо кэширования, офлайн-режим может использовать локальные хранилища.
В приложениях Electron или мобильных оболочках тайлы хранятся как файлы:
/assets/tiles/12/1204/1532.pngПреимущества:
Недостатки:
Браузерное хранилище позволяет сохранять бинарные данные тайлов:
${z}/${x}/${y}Схема использования:
В Leaflet основная точка интеграции офлайн-логики —
L.TileLayer.
Расширение слоя:
L.TileLayer.Offline = L.TileLayer.extend({
createTile: function (coords, done) {
const tile = document.createElement('img');
const key = `${coords.z}/${coords.x}/${coords.y}`;
caches.open('tiles-cache').then((cache) => {
cache.match(`/tiles/${key}.png`).then((response) => {
if (response) {
response.blob().then((blob) => {
tile.src = URL.createObjectURL(blob);
done(null, tile);
});
}
});
});
return tile;
}
});Такой подход позволяет полностью контролировать источник тайлов без Service Worker.
Самый распространённый вариант:
Недостаток — отсутствие векторной гибкости.
Векторные тайлы позволяют:
Однако офлайн-режим требует наличия локального рендера стилей.
Формат MBTiles представляет собой SQLite-базу с тайлами.
Структура:
Преимущества:
Использование в веб-контексте:
Офлайн-карты не являются статичными в долгосрочной перспективе.
Основные стратегии обновления:
При обновлении происходит полная замена набора.
Загружаются только изменённые области:
Каждый тайл имеет срок жизни:
Офлайн-карты могут занимать сотни мегабайт.
Основные механизмы контроля:
CacheStorage quota APIОсновные узкие места:
Чтение из Cache API или IndexedDB может быть медленнее сети при холодном кэше.
PNG тайлы требуют CPU-декодирования.
Каждый тайл — отдельный DOM элемент.
Оптимизации:
Практически всегда используется смешанный режим:
Приоритет источников:
Офлайн-тайлы могут содержать чувствительные данные:
Меры защиты:
Типовая структура приложения:
/map
/leaflet
/service-worker.js
/tiles-manifest.json
/cache-manager.jsКомпоненты:
При отсутствии сети:
Главное ограничение — отсутствие новых тайлов вне предзагруженной зоны.
При росте проекта применяются:
Такая модель позволяет использовать Leaflet даже в условиях полностью автономных систем навигации.