ImageryLayer

CesiumJS строит визуализацию виртуального глобуса на основе многослойной модели данных, где ключевую роль в формировании визуального контекста играет система изображений поверхности (imagery). Поверхностные данные не являются частью геометрии сцены — они накладываются как текстурные слои на эллипсоид Земли или другие 3D-объекты через механизм ImageryLayer.

Архитектура изображений разделяет:

  • источники данных (imagery providers)
  • слои отображения (ImageryLayer)
  • стек слоёв (ImageryLayerCollection)
  • геометрическую подложку (terrain)

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

ImageryLayer: концепция и назначение

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

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

Слой не хранит геометрию — он оперирует растровыми данными, накладываемыми на поверхность глобуса.

Модель наложения слоёв

В CesiumJS используется стековая модель, где порядок слоёв определяет итоговую визуализацию.

Основные принципы:

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

Пример логики композиции:

  1. базовый слой (например, спутниковые снимки)
  2. слой дорог
  3. слой подписей
  4. слой тематических данных (heatmap, границы)

Каждый слой является экземпляром ImageryLayer, а управление ими осуществляется через ImageryLayerCollection.

ImageryLayerCollection

Коллекция слоёв — центральный контейнер:

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

Типичная операция добавления:

viewer.imageryLayers.add(layer);

Удаление:

viewer.imageryLayers.remove(layer);

Перемещение слоя:

viewer.imageryLayers.raise(layer);
viewer.imageryLayers.lower(layer);

Провайдеры изображений

ImageryLayer всегда связан с источником данных ImageryProvider. Провайдер определяет:

  • URL тайлов
  • схему разбиения (tiling scheme)
  • максимальные и минимальные уровни детализации
  • систему координат
  • формат изображений

Основные типы:

  • BingMapsImageryProvider
  • OpenStreetMapImageryProvider
  • ArcGisMapServerImageryProvider
  • WebMapServiceImageryProvider (WMS)
  • WebMapTileServiceImageryProvider (WMTS)
  • TileMapServiceImageryProvider

Каждый провайдер инкапсулирует специфику внешнего картографического сервиса.

Создание ImageryLayer

Создание слоя всегда включает привязку к провайдеру:

import { OpenStreetMapImageryProvider, ImageryLayer } from "cesium";

const provider = new OpenStreetMapImageryProvider({
    url: "https://a.tile.openstreetmap.org/"
});

const layer = new ImageryLayer(provider);
viewer.imageryLayers.add(layer);

Слой становится частью глобальной сцены и начинает участвовать в отрисовке.

Параметры визуального управления

ImageryLayer поддерживает набор свойств, влияющих на финальный рендеринг.

Прозрачность (alpha)

Определяет степень видимости слоя:

layer.alpha = 0.5;

Используется для:

  • смешивания спутниковых и векторных данных
  • наложения аналитических слоёв
  • визуальной иерархии

Яркость (brightness)

Регулирует интенсивность цвета:

layer.brightness = 1.2;

Контраст (contrast)

Изменяет разницу между светлыми и тёмными областями:

layer.contrast = 1.1;

Гамма-коррекция

layer.gamma = 0.8;

Применяется для корректировки визуального восприятия при разных источниках данных.

HueShift и saturation

layer.hue = 0.2;
layer.saturation = 1.5;

Позволяют стилизовать карту под тематические задачи.

Управление порядком слоёв

Порядок слоёв определяет итоговую композицию.

Основные операции:

  • raise() — поднять слой выше
  • lower() — опустить ниже
  • raiseToTop() — переместить в верх
  • lowerToBottom() — переместить в низ

Пример:

viewer.imageryLayers.raiseToTop(layer);

Слой может динамически менять позицию в зависимости от пользовательского взаимодействия или логики приложения.

Работа с прозрачностью и маскированием

Слои могут взаимодействовать через альфа-композицию:

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

Также применяется механизм show:

layer.show = false;

Он полностью исключает слой из рендеринга без удаления из коллекции.

Тайловая структура и загрузка данных

ImageryLayer работает с тайловой сеткой:

  • изображения делятся на квадродерево (quadtree)
  • уровень детализации зависит от zoom
  • загружаются только видимые тайлы

Каждый тайл:

  • имеет координаты (x, y, level)
  • кэшируется в памяти
  • может быть повторно использован

Оптимизация достигается через:

  • LRU-кэширование
  • приоритизацию видимых областей
  • асинхронную загрузку

Интеграция с Terrain

ImageryLayer накладывается поверх terrain-системы:

  • terrain определяет геометрию поверхности
  • imagery определяет визуальное покрытие

При использовании CesiumTerrainProvider изображение деформируется под рельеф.

Кастомные стили и шейдерная модификация

CesiumJS поддерживает более глубокую модификацию визуализации через:

  • color correction
  • custom fragment shaders (в продвинутых сценариях)
  • blending operations

ImageryLayer становится источником входных текстур для GPU-пайплайна.

Временные и динамические изображения

Некоторые провайдеры поддерживают временные слои:

  • спутниковые снимки по датам
  • погодные данные
  • изменения ландшафта

ImageryLayer может обновляться без пересоздания:

layer.imageryProvider = newProvider;

Масштабирование и уровни детализации

Каждый слой определяет:

  • minimumLevel
  • maximumLevel
  • rectangle coverage

Это позволяет ограничивать загрузку данных:

  • локальные карты активны только в определённых регионах
  • глобальные слои работают на всех уровнях zoom

Кэширование и производительность

Система кэширования включает:

  • память браузера
  • временные буферы WebGL
  • диск (при поддержке провайдера)

Оптимизация достигается через:

  • ограничение количества активных слоёв
  • контроль прозрачных слоёв (дороже в рендере)
  • использование tiled imagery вместо single images

Типовые сценарии использования

Базовая карта + аналитический слой

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

Мультимаппинг

  • несколько источников данных одновременно
  • переключение видимости слоёв

Векторная стилизация поверх растров

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

Особенности рендеринга

ImageryLayer участвует в GPU-пайплайне:

  • текстуры загружаются в виде WebGL textures
  • происходит композиция в fragment shader
  • порядок слоёв влияет на blending state

Критически важные факторы производительности:

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