Кастомизация UI

Интерфейс CesiumJS строится вокруг класса Viewer, который объединяет сцену, камеру, слои данных и набор стандартных UI-компонентов. Вся визуальная оболочка представляет собой комбинацию DOM-элементов, Canvas WebGL и вспомогательных HTML-виджетов, наложенных поверх рендеринга.

Ключевая особенность архитектуры UI заключается в том, что почти каждый элемент интерфейса может быть:

  • отключён при инициализации
  • заменён кастомной реализацией
  • стилизован через CSS
  • удалён или добавлен динамически

Основная точка конфигурации интерфейса — объект Viewer, принимающий набор параметров управления UI.

Базовая конфигурация интерфейса Viewer

При создании экземпляра Viewer UI формируется автоматически. Каждый компонент может быть отключён через параметры:

  • animation
  • timeline
  • baseLayerPicker
  • fullscreenButton
  • vrButton
  • geocoder
  • homeButton
  • sceneModePicker
  • navigationHelpButton
  • infoBox
  • selectionIndicator
  • navigationInstructionsInitiallyVisible

Структура UI разделяется на верхнюю панель инструментов, нижнюю временную шкалу и вспомогательные всплывающие окна.

Отключение компонентов позволяет формировать минималистичные интерфейсы для специализированных приложений (геоаналитика, симуляции, мониторинг).

Управление стандартными элементами интерфейса

Панель навигации

Навигационные элементы включают:

  • Home Button
  • Geocoder
  • Scene Mode Picker

Эти элементы управляют камерой и режимом отображения сцены (3D, 2D, Columbus View).

Кастомизация чаще всего выполняется через:

  • отключение встроенных элементов
  • создание собственных кнопок поверх viewer.container

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

Компоненты временной шкалы:

  • Timeline
  • Animation

используются для работы с временными данными (полетные траектории, спутниковые данные, исторические слои).

UI таймлайна включает:

  • ползунок времени
  • управление скоростью
  • кнопки play/pause

При кастомизации часто заменяется только логика, а визуальный слой скрывается через CSS или отключается в Viewer.

BaseLayerPicker

Элемент выбора базовой карты управляет слоями:

  • Bing Maps
  • OpenStreetMap (при подключении)
  • пользовательские ImageryProvider

UI компонент создаёт выпадающий список с превью слоёв.

Расширение функциональности выполняется через добавление пользовательских ImageryProvider:

  • WMTS
  • XYZ tiles
  • ArcGIS services

Полное скрытие стандартного UI

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

const viewer = new Cesium.Viewer("cesiumContainer", {
  animation: false,
  timeline: false,
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  fullscreenButton: false,
  infoBox: false,
  selectionIndicator: false
});

В этом режиме остаётся только WebGL-сцена и минимальный watermark Cesium.

Работа с DOM-структурой интерфейса

UI CesiumJS формируется как набор HTML-элементов внутри контейнера:

  • cesiumContainer

    • canvas (WebGL сцена)
    • cesium-widget
    • cesium-viewer
    • панели управления

Каждый элемент можно модифицировать через стандартные DOM API или CSS.

Пример классов:

  • .cesium-viewer-toolbar
  • .cesium-viewer-animationContainer
  • .cesium-widget-credits

Кастомизация через CSS

Изменение визуального стиля интерфейса осуществляется через переопределение классов.

Скрытие элементов

.cesium-viewer-animationContainer {
    display: none;
}

.cesium-viewer-timelineContainer {
    display: none;
}

Изменение цветовой схемы

.cesium-widget {
    background-color: rgba(10, 10, 10, 0.85);
    color: #e0e0e0;
}

Настройка панели инструментов

.cesium-viewer-toolbar {
    top: 10px;
    right: 10px;
    background: transparent;
}

CSS-кастомизация является основным способом адаптации интерфейса под дизайн системы.

Кастомные UI-элементы поверх Cesium

CesiumJS не ограничивает использование стандартного интерфейса. Поверх сцены может быть размещён любой HTML.

Примеры UI-структур:

  • панели слоёв
  • фильтры объектов
  • карточки объектов
  • индикаторы телеметрии

Размещение осуществляется через абсолютное позиционирование:

.custom-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

Интеграция с внешними UI-фреймворками

CesiumJS часто используется вместе с:

  • React
  • Vue
  • Angular

UI-слой при этом отделяется от рендеринга сцены.

Типовая архитектура:

  • Cesium Viewer живёт внутри ref контейнера
  • UI компоненты управляют состоянием сцены через API
  • события Cesium синхронизируются с состоянием приложения

Перехват и замена стандартных виджетов

InfoBox

InfoBox отображает информацию о выбранных объектах.

Замена стандартного поведения:

  • отключение infoBox: false
  • создание собственного HTML окна
  • обработка события selectedEntityChanged

SelectionIndicator

Индикатор выбора объекта может быть отключён или заменён кастомной графикой.

Часто используется для:

  • 3D маркеров
  • подсветки объектов
  • кастомных анимаций выделения

Credits и управление атрибуцией

Нижний правый угол интерфейса содержит блок атрибуции данных.

Элемент:

  • .cesium-widget-credits

Управление включает:

  • добавление собственных источников данных
  • контроль отображения логотипов провайдеров
  • кастомизацию внешнего вида через CSS

Navigation Help Button открывает встроенное окно с инструкциями по управлению камерой.

Кастомизация включает:

  • отключение стандартного окна
  • создание собственной справочной системы
  • интеграцию с модальными окнами

Полностью кастомный интерфейс поверх Viewer

При создании «headless UI» подхода Viewer используется только как рендер-движок.

UI полностью выносится наружу:

  • кнопки управления камерой
  • выбор слоёв
  • фильтры объектов
  • временные контролы

Cesium становится визуальным ядром без встроенного интерфейса.

Работа с событиями интерфейса

UI-логика строится вокруг событий:

  • camera.changed
  • selectedEntityChanged
  • clock.onTick
  • scene.preRender

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

Персонализация взаимодействия с камерой через UI

Интерфейс управления камерой может быть заменён полностью:

  • кастомные кнопки приближения
  • фиксированные точки обзора
  • туры по сцене
  • автоматические анимации перелётов

Работа выполняется через API камеры:

  • viewer.camera.flyTo
  • viewer.zoomTo
  • viewer.camera.setView

Модульная структура UI в CesiumJS

UI компоненты CesiumJS проектируются как независимые модули:

  • каждый элемент панели — отдельный widget
  • состояние не жёстко связано с DOM
  • логика отделена от представления

Такой подход позволяет:

  • удалять компоненты без влияния на ядро
  • заменять UI частично
  • расширять интерфейс без форков библиотеки
Оглавление