Темы оформления

Темы оформления в CesiumJS формируются не как единый «скин», а как совокупность слоёв визуализации: базовые карты, материалы, освещение сцены, постобработка, стилизация сущностей и оформление пользовательского интерфейса. Такой подход позволяет управлять внешним видом как на уровне глобуса, так и на уровне отдельных объектов, не нарушая производительности и архитектуры WebGL-сцены.

В CesiumJS визуальное оформление распределено по нескольким независимым уровням:

  • базовые слои подложки (ImageryProvider и ImageryLayer)
  • рельеф (TerrainProvider)
  • атмосфера и освещение сцены
  • примитивы и сущности (Entities / Primitives)
  • 3D Tiles стили
  • постобработка (PostProcessStage)
  • CSS-интерфейс Viewer

Каждый уровень влияет на итоговое восприятие сцены и может комбинироваться с другими без конфликтов.

Базовые картографические слои

Основу визуального оформления составляет подложка, задаваемая через провайдеры изображений. CesiumJS поддерживает несколько типов источников: тайловые серверы, WMS/WMTS, Bing Maps и кастомные источники.

const viewer = new Cesium.Viewer("cesiumContainer", {
  imageryProvider: new Cesium.IonImageryProvider({ assetId: 2 }),
  baseLayerPicker: false
});

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

const layer = viewer.imageryLayers.addImageryProvider(
  new Cesium.OpenStreetMapImageryProvider({
    url: "https://a.tile.openstreetmap.org/"
  })
);

layer.alpha = 0.6;
layer.brightness = 1.2;
layer.contrast = 1.1;

Ключевые параметры оформления слоя:

  • alpha — прозрачность слоя
  • brightness — яркость изображения
  • contrast — контраст
  • hue — оттенок
  • saturation — насыщенность
  • gamma — гамма-коррекция

Комбинация нескольких слоёв позволяет формировать стилизованные карты: ночные, инфракрасные, «плоские» минималистичные или фотограмметрические.

Terrain как часть визуальной темы

Рельеф напрямую влияет на восприятие сцены и глубину композиции. Cesium Terrain API позволяет подключать глобальные и локальные модели высот.

viewer.terrainProvider = Cesium.createWorldTerrain();

Настройка рельефа влияет на:

  • теневую модель поверхности
  • реалистичность освещения
  • поведение объектов на поверхности
  • восприятие масштаба сцены

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

viewer.shadows = true;
viewer.terrainShadows = Cesium.ShadowMode.ENABLED;

Освещение, атмосфера и глобальные параметры сцены

CesiumJS использует физически ориентированную модель освещения сцены. Основные параметры находятся в Scene:

viewer.scene.globe.enableLighting = true;
viewer.scene.light = new Cesium.DirectionalLight({
  direction: new Cesium.Cartesian3(1.0, 0.0, -1.0)
});

Ключевые элементы визуального оформления:

  • enableLighting — привязка освещения к положению солнца
  • sunPosition — вычисляемое положение солнца
  • skyAtmosphere — визуализация атмосферы
  • fog — туман на горизонте

Настройки атмосферы:

viewer.scene.skyAtmosphere.hueShift = 0.0;
viewer.scene.skyAtmosphere.saturationShift = 0.2;
viewer.scene.skyAtmosphere.brightnessShift = -0.1;

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

Стилизация сущностей (Entity Styling)

Entity API предоставляет декларативный способ визуального оформления объектов. Каждый объект может иметь собственный стиль отображения:

const entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(30, 50),
  point: {
    pixelSize: 10,
    color: Cesium.Color.RED,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 2
  }
});

Основные стилизуемые компоненты:

  • PointGraphics
  • BillboardGraphics
  • LabelGraphics
  • PolylineGraphics
  • PolygonGraphics

Пример оформления линии:

viewer.entities.add({
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([30, 10, 40, 20]),
    width: 4,
    material: Cesium.Color.fromCssColorString("#00ffcc")
  }
});

Материалы позволяют расширять визуальные эффекты:

material: new Cesium.PolylineGlowMaterialProperty({
  glowPower: 0.25,
  color: Cesium.Color.CYAN
})

Материалы и шейдерные стили

CesiumJS использует систему материалов, которая абстрагирует WebGL-шейдеры. Это ключевой механизм оформления динамических визуальных эффектов.

Типы материалов:

  • ColorMaterialProperty
  • ImageMaterialProperty
  • CheckerboardMaterialProperty
  • StripeMaterialProperty
  • PolylineGlowMaterialProperty

Пример анимационного материала:

material: new Cesium.StripeMaterialProperty({
  evenColor: Cesium.Color.WHITE,
  oddColor: Cesium.Color.BLUE,
  repeat: 8,
  offset: 0.0,
  orientation: Cesium.StripeOrientation.VERTICAL
})

Материалы позволяют формировать визуальные темы вроде:

  • «технических» карт (сетки, полосы)
  • тепловых слоёв
  • подсвеченных маршрутов
  • динамических границ

Стилизация 3D Tiles

3D Tiles поддерживают декларативную систему стилей через Cesium3DTileStyle. Это один из ключевых инструментов тематического оформления больших данных.

tileset.style = new Cesium.Cesium3DTileStyle({
  color: "color('yellow', 0.5)"
});

Стили используют выражения, напоминающие GLSL-подобный синтаксис:

  • условия
  • свойства объектов
  • математические выражения

Пример условной стилизации:

tileset.style = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ["${height} > 100", "color('red')"],
      ["${height} > 50", "color('orange')"],
      ["true", "color('green')"]
    ]
  }
});

Стили позволяют реализовать тематические карты:

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

Постобработка изображения сцены

PostProcessStage применяется после рендеринга сцены и позволяет создавать глобальные визуальные эффекты.

viewer.scene.postProcessStages.fxaa.enabled = true;

Распространённые эффекты:

  • FXAA сглаживание
  • Bloom (свечение)
  • Color grading
  • Depth of field
  • Night vision эффекты

Пример цветовой коррекции:

viewer.scene.postProcessStages.add(
  Cesium.PostProcessStageLibrary.createColorCorrectionStage({
    brightness: 1.2,
    contrast: 1.1,
    saturation: 0.9
  })
);

Постобработка часто используется для создания глобальных «тем»:

  • холодная ночная сцена
  • кинематографический стиль
  • технический интерфейс
  • стилизованная визуализация данных

Primitive API и кастомные визуальные стили

Primitives дают более низкоуровневый контроль над визуализацией по сравнению с Entity API. Здесь оформление задаётся через Appearance и Material.

const geometry = new Cesium.RectangleGeometry({
  rectangle: Cesium.Rectangle.fromDegrees(-100, 30, -90, 40)
});

const primitive = new Cesium.Primitive({
  geometryInstances: new Cesium.GeometryInstance({
    geometry: geometry
  }),
  appearance: new Cesium.EllipsoidSurfaceAppearance({
    material: Cesium.Material.fromType("Color", {
      color: Cesium.Color.PURPLE
    })
  })
});

viewer.scene.primitives.add(primitive);

Этот уровень позволяет:

  • создавать кастомные визуальные эффекты
  • использовать шейдеры напрямую
  • оптимизировать большие сцены

CSS-оформление интерфейса Viewer

Визуальная тема не ограничивается сценой WebGL. Интерфейс Cesium Viewer полностью основан на HTML/CSS.

Основные зоны оформления:

  • панели управления
  • кнопки навигации
  • timeline
  • animation widget
  • base layer picker

Пример кастомизации:

.cesium-viewer-toolbar {
  background: rgba(10, 10, 10, 0.8);
  border-radius: 4px;
}

.cesium-button {
  background: #222;
  color: #0ff;
}

Скрытие элементов интерфейса:

const viewer = new Cesium.Viewer("cesiumContainer", {
  timeline: false,
  animation: false,
  geocoder: false,
  homeButton: false
});

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

Композиция тем оформления

Полноценная визуальная тема в CesiumJS формируется как комбинация нескольких уровней:

  • базовая карта определяет стиль подложки
  • атмосфера задаёт общее освещение
  • материалы формируют поведение объектов
  • 3D Tiles задают смысловую визуализацию данных
  • постобработка создаёт глобальный художественный эффект
  • CSS завершает визуальную систему интерфейса

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

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

Динамическое переключение визуальных режимов

В CesiumJS оформление часто реализуется как переключаемые конфигурации сцены.

function setNightMode(viewer) {
  viewer.scene.skyAtmosphere.brightnessShift = -0.3;
  viewer.scene.globe.enableLighting = true;
  viewer.imageryLayers.get(0).brightness = 0.5;
}
function setDayMode(viewer) {
  viewer.scene.skyAtmosphere.brightnessShift = 0.1;
  viewer.scene.globe.enableLighting = false;
  viewer.imageryLayers.get(0).brightness = 1.0;
}

Такой подход позволяет формировать предустановленные темы без изменения данных сцены или геометрии.

Оглавление