В приложениях, построенных на Mapbox GL JS, интерфейс редактора представляет собой совокупность визуальных и программных компонентов, обеспечивающих управление стилем карты, слоями, источниками данных и интерактивными состояниями. Несмотря на отсутствие единого «встроенного редактора» в библиотеке, архитектура интерфейса формируется разработчиком на основе API и UI-паттернов.
Базовая структура интерфейса обычно включает:
Каждый элемент интерфейса связан с состоянием карты и синхронизируется через события и методы API.
Основой интерфейса выступает канвас WebGL, на котором отображается вся геометрия. Он не является статичным компонентом, а полностью управляется через состояние карты.
Ключевые характеристики:
Именно эта область служит визуальным отражением всех изменений, внесённых через интерфейс редактора.
Слойная структура — центральный элемент логики интерфейса. Каждый слой связан с конкретным источником данных и стилевыми параметрами.
Типичная панель слоёв включает:
Слой в Mapbox GL JS описывается декларативно через style specification, что позволяет интерфейсу редактора отображать его как структурированный объект.
Инспектор используется для анализа и редактирования конкретных географических объектов на карте. Он взаимодействует с методами выборки данных из слоёв.
Основные функции:
queryRenderedFeatures)Инспектор работает на основе событий мыши и касаний, таких как
click, mousemove, touchstart.
Редактирование стилей осуществляется через JSON-структуру, соответствующую спецификации Mapbox Style. Интерфейс редактора отображает эту структуру в виде логических блоков:
Примеры редактируемых свойств:
fill-color)line-width)opacity)interpolate,
zoom-based styling)Интерфейс должен обеспечивать синхронизацию между визуальным изменением и JSON-представлением стиля.
Навигационный блок отвечает за управление камерой карты.
Основные элементы:
Эти элементы напрямую связаны с методами:
map.zoomIn()map.zoomOut()map.easeTo()map.flyTo()Навигационные компоненты часто реализуются как отдельные UI-контролы, подключаемые к экземпляру карты.
Интерфейс редактора тесно связан с внутренним состоянием карты, которое включает:
Любое изменение состояния вызывает событие обновления рендера. Синхронизация UI осуществляется через подписку на события:
movezoomrotaterenderloadИнтерфейс редактора обязан отражать эти изменения без задержек, чтобы избежать рассинхронизации визуального состояния и управляющих элементов.
Событийная модель является основой взаимодействия между пользовательским интерфейсом и картой.
Основные категории событий:
Навигационные:
Интерактивные:
Системные:
Каждое событие может быть использовано для обновления интерфейсных компонентов, таких как панели свойств или инспекторы.
Редактор слоёв реализуется как связка визуального списка и формы редактирования параметров.
Типичный сценарий включает:
При изменении параметров вызываются методы:
setPaintPropertysetLayoutPropertysetFilterЭто обеспечивает динамическое обновление слоя без перезагрузки карты.
Интерфейс редактора должен поддерживать визуальную обратную связь для всех действий пользователя.
Основные механизмы:
Эти элементы обеспечивают связность между действиями пользователя и изменениями на карте.
Интерфейс редактора не ограничивается визуальными элементами и активно управляется через JavaScript API.
Ключевые возможности:
Пример логики управления:
Таким образом, интерфейс является отражением программной модели карты, а не отдельной статической системой.