Стены и цилиндры

Примитив Wall предназначен для построения вертикальных поверхностей между набором географических координат. Стены широко применяются для визуализации границ территорий, маршрутов, инженерных сооружений, геологических разрезов, ограждений, коридоров полёта и различных аналитических объектов.

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

Основным объектом для создания стены является WallGraphics, который обычно используется через сущности (Entity).

Создание простой стены

viewer.entities.add({
    wall: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            30.0, 50.0,
            31.0, 50.2,
            32.0, 49.8
        ]),
        maximumHeights: [10000, 10000, 10000],
        minimumHeights: [0, 0, 0],
        material: Cesium.Color.RED
    }
});

В данном примере:

positions задаёт опорные точки стены;
maximumHeights определяет верхнюю границу;
minimumHeights определяет нижнюю границу;
material отвечает за внешний вид поверхности.

В результате формируется вертикальная плоскость, проходящая через указанные точки.

Принцип построения стены

Стена создаётся путём соединения двух наборов высот:

нижнего контура (minimumHeights);
верхнего контура (maximumHeights).

Для каждой координаты формируются две вершины:

Верхняя вершина
      │
      │
      │
Нижняя вершина

После этого Cesium строит между ними треугольную сетку.

Количество элементов в массивах высот должно совпадать с количеством координат.

Корректный пример:

positions: Cesium.Cartesian3.fromDegreesArray([
    10, 50,
    11, 50,
    12, 50
]),

maximumHeights: [
    5000,
    7000,
    3000
],

minimumHeights: [
    0,
    0,
    0
]

Стены переменной высоты

Высота стены может изменяться вдоль маршрута.

viewer.entities.add({
    wall: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            -120.0, 40.0,
            -119.0, 41.0,
            -118.0, 40.5,
            -117.0, 40.0
        ]),

        maximumHeights: [
            5000,
            10000,
            15000,
            8000
        ],

        minimumHeights: [
            0,
            0,
            0,
            0
        ],

        material: Cesium.Color.BLUE.withAlpha(0.6)
    }
});

Такая техника позволяет отображать:

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

Использование полупрозрачности

Для аналитических сцен часто применяются прозрачные стены.

material: Cesium.Color.CYAN.withAlpha(0.3)

Пример:

viewer.entities.add({
    wall: {
        positions: positions,
        maximumHeights: [12000, 12000, 12000],
        minimumHeights: [0, 0, 0],
        material: Cesium.Color.GREEN.withAlpha(0.4)
    }
});

Полупрозрачность позволяет одновременно видеть:

сам объект;
поверхность Земли;
расположенные позади модели и примитивы.

Материалы стен

Однотонная заливка

material: Cesium.Color.ORANGE

Полупрозрачная заливка

material: Cesium.Color.YELLOW.withAlpha(0.5)

Использование изображения

Стена может быть покрыта текстурой.

viewer.entities.add({
    wall: {
        positions: positions,
        maximumHeights: [5000, 5000, 5000],
        minimumHeights: [0, 0, 0],
        material: "images/texture.png"
    }
});

Текстура автоматически растягивается по поверхности.

GridMaterialProperty

Сетчатый материал часто применяется для инженерных систем и измерений.

material: new Cesium.GridMaterialProperty({
    color: Cesium.Color.WHITE,
    cellAlpha: 0.2,
    lineCount: new Cesium.Cartesian2(10, 10)
})

StripeMaterialProperty

Полосатая структура.

material: new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.RED,
    repeat: 20
})

Стены на основе геодезических координат

Наиболее распространённый способ задания координат — через градусы.

Cesium.Cartesian3.fromDegreesArray([
    37.6173, 55.7558,
    37.70, 55.80,
    37.90, 55.70
])

Метод автоматически преобразует долготу и широту в мировую систему координат Cesium.

Создание стены вокруг области

Стены часто используются для выделения регионов.

viewer.entities.add({
    wall: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            10, 50,
            15, 50,
            15, 55,
            10, 55,
            10, 50
        ]),

        maximumHeights: [
            8000,
            8000,
            8000,
            8000,
            8000
        ],

        minimumHeights: [
            0,
            0,
            0,
            0,
            0
        ],

        material: Cesium.Color.RED.withAlpha(0.3)
    }
});

Такой подход используется для отображения:

охраняемых территорий;
зон контроля;
административных границ;
опасных районов;
промышленных объектов.

Анимация стены

Высоту можно изменять динамически.

let height = 0;

viewer.entities.add({
    wall: {
        positions: positions,

        maximumHeights: new Cesium.CallbackProperty(() => {
            height += 50;

            return [
                height,
                height,
                height
            ];
        }, false),

        minimumHeights: [0, 0, 0],

        material: Cesium.Color.BLUE
    }
});

Визуально создаётся эффект роста стены.

Цилиндры в CesiumJS

Цилиндры относятся к объёмным геометрическим объектам и создаются при помощи CylinderGraphics.

Такие объекты используются для отображения:

башен;
резервуаров;
колонн;
датчиков;
зон покрытия;
аналитических маркеров.

Создание простого цилиндра

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
        30.0,
        50.0,
        5000
    ),

    cylinder: {
        length: 10000,
        topRadius: 2000,
        bottomRadius: 2000,
        material: Cesium.Color.BLUE
    }
});

Параметры:

Свойство	Назначение
`length`	Высота цилиндра
`topRadius`	Радиус верхнего основания
`bottomRadius`	Радиус нижнего основания
`material`	Материал поверхности

Геометрия цилиндра

При одинаковых радиусах формируется классический цилиндр.

topRadius: 1000,
bottomRadius: 1000

Схематично:

 ______
|      |
|      |
|      |
|______|

Усечённый конус

Если радиусы различаются, создаётся усечённый конус.

viewer.entities.add({
    position: position,

    cylinder: {
        length: 8000,
        topRadius: 1000,
        bottomRadius: 3000,
        material: Cesium.Color.ORANGE
    }
});

Схематично:

   __
  /  \
 /    \
/______\

Конус

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

viewer.entities.add({
    position: position,

    cylinder: {
        length: 12000,
        topRadius: 0,
        bottomRadius: 5000,
        material: Cesium.Color.YELLOW
    }
});

Настройка прозрачности цилиндра

material: Cesium.Color.RED.withAlpha(0.4)

Пример:

cylinder: {
    length: 15000,
    topRadius: 3000,
    bottomRadius: 3000,
    material: Cesium.Color.CYAN.withAlpha(0.3)
}

Полезно для отображения объёмов данных и зон покрытия.

Контур цилиндра

Cesium позволяет отображать границы объекта отдельно от основной поверхности.

cylinder: {
    length: 10000,
    topRadius: 2000,
    bottomRadius: 2000,

    material: Cesium.Color.BLUE,

    outline: true,
    outlineColor: Cesium.Color.WHITE
}

Толщина контура

outlineWidth: 3

Полный пример:

cylinder: {
    length: 10000,
    topRadius: 3000,
    bottomRadius: 3000,

    material: Cesium.Color.GREEN,

    outline: true,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth: 3
}

Следует учитывать, что поддержка толщины контура зависит от графического API и видеодрайвера.

Поворот цилиндра

По умолчанию цилиндр ориентирован вдоль локальной вертикальной оси.

Для изменения ориентации используется свойство orientation.

const position =
    Cesium.Cartesian3.fromDegrees(
        30,
        50,
        10000
    );

const heading =
    Cesium.Math.toRadians(45);

const pitch =
    Cesium.Math.toRadians(30);

const roll = 0;

viewer.entities.add({
    position,

    orientation:
        Cesium.Transforms.headingPitchRollQuaternion(
            position,
            new Cesium.HeadingPitchRoll(
                heading,
                pitch,
                roll
            )
        ),

    cylinder: {
        length: 10000,
        topRadius: 2000,
        bottomRadius: 2000,
        material: Cesium.Color.RED
    }
});

Анимация цилиндра

Изменение размеров возможно через CallbackProperty.

let radius = 1000;

viewer.entities.add({
    position: position,

    cylinder: {
        length: 10000,

        topRadius: new Cesium.CallbackProperty(() => {
            radius += 10;
            return radius;
        }, false),

        bottomRadius: new Cesium.CallbackProperty(() => {
            return radius;
        }, false),

        material: Cesium.Color.BLUE
    }
});

Создаётся эффект постепенного расширения объекта.

Цилиндр как зона покрытия

Одно из наиболее распространённых применений цилиндров — отображение радиуса действия оборудования.

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
        37.6173,
        55.7558
    ),

    cylinder: {
        length: 5000,
        topRadius: 10000,
        bottomRadius: 10000,

        material: Cesium.Color.GREEN.withAlpha(0.25),

        outline: true,
        outlineColor: Cesium.Color.GREEN
    }
});

Подобная визуализация используется для:

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

Производительность при работе со стенами и цилиндрами

При построении больших сцен важно учитывать особенности генерации геометрии.

Для стен рекомендуется:

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

Для цилиндров рекомендуется:

ограничивать число одновременно отображаемых объектов;
избегать постоянного обновления свойств без необходимости;
применять CallbackProperty только для действительно динамических объектов;
отключать невидимые сущности.

Стены эффективно подходят для отображения протяжённых вертикальных поверхностей и пространственных границ, тогда как цилиндры обеспечивают наглядное представление объёмных объектов, зон покрытия и аналитических областей в трёхмерных сценах CesiumJS.