Учебник MapLibre GL JS

Введение
- Что такое MapLibre GL JS
- История появления и отличия от Mapbox GL JS
- Основные возможности и области применения
- Требования к браузерам и производительность
- Структура документации и как пользоваться учебником
Установка и настройка окружения
- Подключение через CDN
- Установка через npm
- Установка через yarn
- Сборка с использованием webpack
- Интеграция с Vite
- Настройка TypeScript
- Работа с исходным кодом библиотеки
Первая карта
- Минимальный HTML-шаблон
- Инициализация экземпляра карты
- Базовые параметры конструктора
- Понимание системы координат
- Выбор источника тайлов
- Работа с базовыми стилями
- Обработка событий загрузки карты
Работа со стилями карты
- Структура JSON-спецификации стиля
- Источники данных в стиле
- Слои и их типы
- Базовые свойства слоев
- Загрузка пользовательских стилей
- Переключение между стилями
- Создание собственного стиля с нуля
- Валидация стилей
Источники данных
- Типы источников данных
- Vector источник
- Raster источник
- Raster DEM источник
- GeoJSON источник
- Image источник
- Video источник
- Canvas источник
- Динамическое добавление источников
- Обновление данных источника
- Удаление источников
Слои и их типы
- Fill слой
- Line слой
- Symbol слой
- Circle слой
- Heatmap слой
- Fill-extrusion слой
- Raster слой
- Hillshade слой
- Background слой
- Порядок отрисовки слоев
- Видимость слоев
- Фильтрация слоев
Стилизация слоев
- Paint свойства
- Layout свойства
- Работа с цветами
- Прозрачность и opacity
- Толщина линий и границ
- Паттерны и текстуры
- Работа со спрайтами
- Иконки и символы
- Шрифты и текстовые метки
- Сглаживание и антиалиасинг
Выражения
- Синтаксис выражений
- Математические операторы
- Логические операторы
- Строковые операции
- Операции с массивами
- Условные выражения
- Выражения для interpolate
- Выражения для step
- Выражения для match
- Выражения для case
- Работа со свойствами feature
- Использование zoom в выражениях
- Выражения для heatmap
- Выражения для geometry
Работа с данными GeoJSON
- Структура GeoJSON
- Point геометрия
- LineString геометрия
- Polygon геометрия
- MultiPoint геометрия
- MultiLineString геометрия
- MultiPolygon геометрия
- GeometryCollection
- Feature и FeatureCollection
- Свойства features
- Загрузка GeoJSON из файла
- Загрузка GeoJSON по API
- Динамическое создание GeoJSON
- Обновление GeoJSON данных
- Оптимизация больших GeoJSON файлов
Маркеры и попапы
- Создание простого маркера
- Настройка внешнего вида маркера
- HTML-элементы как маркеры
- Позиционирование маркеров
- Добавление и удаление маркеров
- События маркеров
- Создание попапов
- Привязка попапов к маркерам
- Настройка содержимого попапов
- Позиционирование попапов
- Закрытие попапов
- Попапы на слоях
Управление камерой
- Центрирование карты
- Установка уровня зума
- Методы setCenter и setZoom
- Плавная анимация камеры
- FlyTo и его параметры
- EaseTo для плавных переходов
- JumpTo для мгновенных переходов
- Параметры padding
- Работа с bearing
- Ограничения камеры
- FitBounds для охвата области
- CameraForBounds
События
- Типы событий карты
- Обработчики событий
- Mouse события
- Touch события
- Drag события
- Zoom события
- Pitch и rotate события
- Load и error события
- Data события
- Style события
- Source события
- Render события
- События слоев
- Query rendered features
- Удаление обработчиков событий
Интерактивность
- Определение кликов по объектам
- Hover эффекты
- Изменение курсора
- Feature state
- Выделение выбранных объектов
- Подсветка при наведении
- Всплывающие подсказки
- Drag and drop объектов
- Рисование на карте
- Редактирование геометрии
Элементы управления
- NavigationControl
- GeolocateControl
- ScaleControl
- FullscreenControl
- AttributionControl
- Создание пользовательских контролов
- Позиционирование контролов
- Стилизация контролов
- Удаление контролов
Геолокация
- Определение текущей позиции
- Настройка GeolocateControl
- Отслеживание движения
- Точность геолокации
- Обработка ошибок геолокации
- Кастомизация маркера позиции
- События геолокации
Фильтрация данных
- Синтаксис фильтров
- Comparison фильтры
- Membership фильтры
- Existential фильтры
- Combining фильтры
- Фильтрация по свойствам
- Фильтрация по геометрии
- Динамическое изменение фильтров
- Производительность фильтров
Запросы к карте
- QueryRenderedFeatures
- QuerySourceFeatures
- Параметры запросов
- Фильтрация результатов
- Работа с результатами запросов
- Оптимизация запросов
- Ограничения запросов
Анимация
- Анимация камеры
- Анимация свойств слоев
- RequestAnimationFrame
- Анимация вдоль пути
- Анимация данных
- Покадровая анимация
- Управление временем анимации
- Производительность анимаций
3D возможности
- Работа с pitch
- Fill-extrusion для зданий
- Высота зданий из данных
- Освещение 3D объектов
- Terrain и рельеф местности
- DEM источники
- Настройка exaggeration
- Sky слой
- Fog эффект
- 3D модели
Растровые слои
- Подключение тайловых слоев
- WMS сервисы
- WMTS сервисы
- TMS схема тайлов
- Работа с Tile JSON
- Ретина тайлы
- Bounds для растровых источников
- Прозрачность растровых слоев
Векторные тайлы
- Формат векторных тайлов
- Протокол MVT
- Источники векторных тайлов
- Source-layer в стилях
- Генерация векторных тайлов
- Tippecanoe
- Оптимизация векторных тайлов
- Самостоятельный хостинг тайлов
Тепловые карты
- Создание heatmap слоя
- Настройка интенсивности
- Радиус точек
- Цветовая палитра
- Weight выражения
- Оптимизация для больших данных
- Динамическое обновление данных
Кластеризация
- Включение кластеризации в GeoJSON
- Настройка радиуса кластера
- Максимальный zoom кластеризации
- Стилизация кластеров
- Отображение количества точек
- Раскрытие кластеров
- Получение точек кластера
- Производительность кластеризации
Геокодирование
- Интеграция с geocoding API
- Прямое геокодирование
- Обратное геокодирование
- Autocomplete для поиска
- Ограничение области поиска
- Типы результатов геокодирования
- Отображение результатов на карте
Маршрутизация
- Построение маршрутов
- Directions API
- Отображение маршрута на карте
- Альтернативные маршруты
- Профили маршрутизации
- Расчет расстояния и времени
Производительность
- Оптимизация рендеринга
- Упрощение геометрии
- Работа с большими данными
- Дебаунсинг событий
- Throttling обновлений
- Ленивая загрузка данных
- Кэширование
- Web Workers
- Profiling и debugging
- Memory management
Работа с изображениями
- Загрузка изображений
- Спрайты изображений
- SDF иконки
- Генерация спрайтов
- Использование изображений в стилях
- Динамическое добавление изображений
- Canvas для генерации изображений
Работа со шрифтами
- Форматы шрифтов
- Glyphs в MapLibre
- Загрузка шрифтов
- Генерация glyphs
- Стилизация текста
- Multilingual поддержка
- Fallback шрифты
Рисование и редактирование
- MapLibre GL Draw
- Установка и настройка
- Режимы рисования
- Рисование точек
- Рисование линий
- Рисование полигонов
- Удаление объектов
- Стилизация draw элементов
- События draw
- Экспорт нарисованных объектов
Измерения
- Измерение расстояний
- Измерение площадей
- Turf.js для расчетов
- Отображение результатов
- Единицы измерения
- Точность измерений
Пространственный анализ
- Интеграция с Turf.js
- Buffer операции
- Union полигонов
- Intersection геометрий
- Difference операции
- Поиск ближайших точек
- Определение вхождения точки в полигон
- Расчет центроидов
- Simplify геометрии
- Convex hull
Работа с проекциями
- Система координат
- Web Mercator проекция
- Другие проекции
- Преобразование координат
- Bounds и их форматы
- LngLat и LngLatBounds
Интеграция с фреймворками
- React интеграция
- React hooks для карты
- Vue интеграция
- Angular интеграция
- Svelte интеграция
- Управление жизненным циклом
TypeScript
- Типизация MapLibre
- Типы для стилей
- Типы для событий
- Типы для источников
- Типы для слоев
- Создание типизированных оберток
- Общие паттерны типизации
Тестирование
- Unit тесты для карт
- Мокирование MapLibre
- Тестирование событий
- Snapshot тестирование
- E2E тестирование карт
- Инструменты для тестирования
Debugging
- Использование DevTools
- Инспекция слоев
- Анализ производительности
- Логирование событий
- Визуализация tile boundaries
- Отладка стилей
- Проблемы с загрузкой ресурсов
Деплой и хостинг
- Оптимизация для продакшена
- Минификация стилей
- CDN для тайлов
- Настройка CORS
- Кэширование на сервере
- Gzip сжатие
- Мониторинг производительности
Безопасность
- API ключи и их защита
- Ограничение домов
- Rate limiting
- Безопасность пользовательского контента
- XSS предотвращение
- HTTPS требования
Доступность
- Keyboard navigation
- Screen reader поддержка
- ARIA атрибуты
- Альтернативный контент
- Цветовая доступность
- Focus management
Миграция с Mapbox GL JS
- Ключевые различия
- API совместимость
- Замена зависимостей
- Миграция стилей
- Изменения в событиях
- Deprecated функции
- Тестирование после миграции
Расширенные техники
- Custom source types
- Протокол для источников
- Offscreen rendering
- Множественные карты
- Синхронизация карт
- Picture-in-picture карты
- Экспорт карты в изображение
- Печать карт
Плагины и расширения
- Обзор экосистемы
- Установка плагинов
- Популярные плагины
- Создание собственных плагинов
- API для плагинов
Troubleshooting
- Частые ошибки
- Проблемы с производительностью
- Проблемы с отображением
- Проблемы с событиями
- Проблемы со стилями
- Проблемы с источниками
Справочник API
- Map класс
- LngLat класс
- LngLatBounds класс
- Point класс
- Marker класс
- Popup класс
- Control интерфейс
- Evented интерфейс
- Style specification