В экосистеме MapLibre GL JS работа с редактируемой графикой поверх карты строится через концепцию режимов (modes). Режим определяет текущее поведение пользовательского ввода: клики, перемещения курсора, перетаскивание вершин, создание новых объектов и их редактирование.
Механизм режимов чаще всего реализуется через надстройку над базовым рендером карты — библиотеку MapLibre GL Draw, которая вводит конечный автомат состояний для геометрий GeoJSON.
Режимы рисования позволяют разделить поведение на изолированные сценарии:
Каждый режим представляет собой объект с набором методов жизненного цикла:
onSetup() — инициализация состояния режимаonClick() — обработка кликовonMouseMove() — реакция на движение курсораonKeyUp() / onKeyDown() — клавиатурные
событияtoDisplayFeatures() — управление отображением
GeoJSONonStop() — завершение режимаСостояние режима хранит временные данные:
Такой подход позволяет полностью отделить логику редактирования от визуализации слоя карты.
Режим выбора объектов без активного редактирования. Используется как состояние по умолчанию для навигации по данным.
Поведение:
Типичные операции:
Режим точечного редактирования геометрии.
Особенности:
Механика работы:
Используется при точной геопривязке объектов.
Режим создания точечных объектов.
Поведение:
PointПрименение:
Режим построения ломаных линий.
Алгоритм:
Особенности:
Режим построения полигонов.
Логика:
Дополнительные функции:
Static mode используется для блокировки редактирования.
Поведение:
Применение:
Модель режимов допускает расширение через создание кастомных состояний.
Структура пользовательского режима:
const customMode = {
onSetup() {
return {
coordinates: []
};
},
onClick(state, e) {
state.coordinates.push([e.lngLat.lng, e.lngLat.lat]);
},
toDisplayFeatures(state, geojson, display) {
display(geojson);
}
};Ключевые возможности:
Система режимов построена на переключении контекста:
changeModeПример логики переходов:
simple_select → direct_select при выборе объектаdraw_polygon → simple_select при завершении
рисованияdraw_line_string → draw_line_string при продолжении
построенияКаждый режим работает поверх GeoJSON Feature Collection.
Основные сущности:
Состояние режима синхронизируется с источником данных:
Любое изменение проходит через единый pipeline обновления слоя карты.
События MapLibre GL JS передаются в режим через адаптер:
Типовая последовательность:
Это обеспечивает детерминированную реакцию интерфейса на действия пользователя.
Режимы рисования активно используют промежуточную отрисовку:
Функция toDisplayFeatures определяет, какие
элементы:
Это позволяет разделять внутреннее состояние и визуальную модель.
В режимах редактирования каждая геометрия разбивается на набор интерактивных узлов.
Операции:
Для линий и полигонов применяется топологический пересчет:
При обработке взаимодействий действует приоритет:
Это предотвращает конфликт между редактированием и навигацией карты.
Режимы рисования напрямую влияют на нагрузку рендеринга.
Оптимизации включают:
При больших наборах данных предпочтение отдается частичному обновлению геометрий вместо полной переработки слоя.
Режимы могут взаимодействовать с дополнительными слоями карты:
При этом редактируемые объекты всегда имеют приоритет отображения над фоновыми слоями, чтобы сохранять интерактивность.
Для сохранения состояния используется преобразование:
Это позволяет: