CSS классы виджетов

Интерфейс CesiumJS формируется набором DOM-элементов, которым автоматически назначаются CSS-классы при создании Viewer. Основной контейнер сцены получает класс:

  • cesium-widget — корневой элемент WebGL-контекста
  • cesium-widget canvas — холст рендеринга сцены

Поверх него создаётся оболочка viewer:

  • cesium-viewer — главный контейнер интерфейса
  • cesium-viewer-container — внутренний слой компоновки
  • cesium-viewer-cesiumWidgetContainer — область, где размещается 3D сцена

Эти классы формируют базовую визуальную структуру приложения и определяют поведение позиционирования всех UI-элементов.

Системные классы компоновки Viewer

Viewer в CesiumJS строится как набор независимых панелей, каждая из которых имеет собственный CSS-слой.

Основные контейнеры:

  • cesium-viewer-fullscreenContainer — обёртка для режима полноэкранного отображения
  • cesium-viewer-timelineContainer — контейнер временной шкалы
  • cesium-viewer-animationContainer — контейнер анимационного контроллера
  • cesium-viewer-toolbar — верхняя панель инструментов

Эти классы обеспечивают фиксированную структуру интерфейса, где каждая панель позиционируется через absolute/flex layout внутри общего контейнера.

Панель инструментов и кнопочные элементы

Инструментальная панель CesiumJS содержит набор стандартных кнопок, каждая из которых стилизуется через отдельные CSS-классы.

Основные элементы:

  • cesium-button — базовый стиль всех кнопок интерфейса
  • cesium-toolbar-button — кнопки панели инструментов
  • cesium-home-button — кнопка возврата к исходной камере
  • cesium-geocoder-input — поле поиска объектов
  • cesium-navigation-help-button — справка по управлению
  • cesium-sceneModePicker-wrapper — переключение режимов сцены

Класс cesium-button задаёт общую модель взаимодействия: hover, active, disabled состояния, а специализированные классы расширяют визуальное поведение.

Геокодер и поисковый интерфейс

Поисковый компонент строится вокруг класса:

  • cesium-viewer-geocoderContainer

Внутри него используются:

  • cesium-geocoder-input — текстовое поле ввода
  • cesium-geocoder-searchButton — кнопка запуска поиска
  • cesium-geocoder-results — список результатов

Результаты поиска формируются в виде выпадающего блока, стилизуемого через:

  • cesium-geocoder-results-container
  • cesium-geocoder-result

Каждый результат поддерживает состояния hover и active, которые реализуются через псевдоклассы и модификаторы класса.

Таймлайн и анимация

Система времени в CesiumJS представлена двумя основными UI-модулями.

Таймлайн

Контейнер:

  • cesium-viewer-timelineContainer

Внутренние элементы:

  • cesium-timeline-main — основная шкала времени
  • cesium-timeline-track — дорожка событий
  • cesium-timeline-icon — маркеры событий

Анимация

Контейнер:

  • cesium-viewer-animationContainer

Основные элементы:

  • cesium-animation-controls — блок управления воспроизведением
  • cesium-animation-button — кнопки play/pause/step
  • cesium-animation-blank — вспомогательные элементы разметки

Стили этих компонентов тесно связаны с синхронизацией времени сцены и состоянием Clock.

Переключатель режимов сцены

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

  • cesium-sceneModePicker
  • cesium-sceneModePicker-dropDown
  • cesium-sceneModePicker-button

Каждый режим (3D, 2D, Columbus View) визуально представляется как элемент списка:

  • cesium-sceneModePicker-item

Активный режим отмечается модификатором состояния:

  • cesium-sceneModePicker-selected

Полноэкранный режим и слой UI

Полноэкранный режим управляется через:

  • cesium-viewer-fullscreenContainer

При активации изменяется поведение следующих классов:

  • cesium-widget — расширяется на весь viewport
  • cesium-viewer — переключается в режим fixed/absolute

Дополнительно могут появляться системные классы состояния:

  • cesium-fullscreen — активное состояние полноэкранного режима

Стилизация слоёв интерфейса

CesiumJS использует каскадную систему слоёв, где порядок определяется z-index через CSS-классы:

  • сцена (cesium-widget) — базовый слой
  • UI панели (cesium-viewer-*) — средний слой
  • всплывающие окна — верхний слой

Типичные всплывающие элементы:

  • cesium-infoBox — информационное окно объекта
  • cesium-selection-wrapper — контейнер выделения
  • cesium-popup — пользовательские всплывающие окна (если реализованы поверх API)

Информационные панели и инспектор объектов

Информационная панель строится вокруг класса:

  • cesium-infoBox

Внутренние элементы:

  • cesium-infoBox-title — заголовок объекта
  • cesium-infoBox-body — содержимое
  • cesium-infoBox-closeButton — кнопка закрытия

Для выделенных объектов используется:

  • cesium-selected-entity — визуальная индикация выбора
  • cesium-highlight — подсветка геометрии (через связанный canvas overlay)

Навигационные элементы и компас

Навигационный блок использует следующие классы:

  • cesium-navigation-help — окно справки
  • cesium-navigation-button — кнопка открытия справки
  • cesium-scene-compass — компас ориентации сцены
  • cesium-scene-compass-outerRing — внешний круг
  • cesium-scene-compass-innerRing — внутренний элемент вращения

Эти элементы взаимодействуют с камерой через события вращения и наклона, визуально отражая состояние Camera.heading и Camera.pitch.

Принципы переопределения CSS

Стили CesiumJS строятся как набор предсказуемых классов без shadow DOM, что позволяет полностью переопределять внешний вид через внешние таблицы стилей.

Типовые подходы модификации:

  • переопределение базового контейнера cesium-viewer
  • изменение кнопочной системы через .cesium-button
  • управление прозрачностью панелей через background и opacity
  • скрытие элементов через display: none для классов cesium-viewer-toolbar, cesium-viewer-animationContainer

Особенность структуры заключается в высокой специфичности селекторов, поэтому часто требуется использование каскадного уточнения:

  • .cesium-viewer .cesium-button
  • .cesium-widget canvas

Состояния интерфейса и динамические классы

Некоторые классы добавляются и удаляются динамически в зависимости от состояния приложения:

  • cesium-viewer-geocoderContainer-visible — открытый поиск
  • cesium-timeline-container-visible — активная временная шкала
  • cesium-button-disabled — заблокированная кнопка
  • cesium-active — общее активное состояние элементов управления

Такие классы управляются внутренними компонентами Viewer и отражают состояние Scene, Clock и UI-событий.

Оглавление