Библиотека CesiumJS предоставляет специализированные графические примитивы для отображения прямоугольных областей и протяжённых объектов на поверхности Земли. Для этих целей используются сущности RectangleGraphics и CorridorGraphics. Несмотря на внешнюю простоту, оба типа объектов обладают широкими возможностями настройки и активно применяются в геоинформационных системах, навигационных сервисах, военных симуляторах, системах мониторинга и приложениях пространственного анализа.

---

Прямоугольники в CesiumJS

Прямоугольник представляет собой область поверхности Земли, ограниченную двумя парами координат:

• западная долгота (west);
• южная широта (south);
• восточная долгота (east);
• северная широта (north).

В отличие от HTML-элементов или двумерной графики, прямоугольник в Cesium определяется географическими координатами и автоматически проецируется на эллипсоид Земли.

Создание простого прямоугольника

viewer.entities.add({
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
            30.0,
            50.0,
            40.0,
            55.0
        ),
        material: Cesium.Color.BLUE.withAlpha(0.5)
    }
});

Параметр coordinates принимает объект Rectangle.

Функция:

Cesium.Rectangle.fromDegrees(
    west,
    south,
    east,
    north
);

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

---

Геометрия прямоугольника

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

Схематично область выглядит следующим образом:

north
  ^
  |
  +------------------+
  |                  |
  |                  |
  |                  |
  +------------------+
  |
south

west -------------> east

На глобусе стороны прямоугольника следуют линиям широты и долготы.

---

Цвет и прозрачность

Для задания цвета используется свойство material.

viewer.entities.add({
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
            -10,
            40,
            10,
            50
        ),
        material: Cesium.Color.RED
    }
});

Полупрозрачный вариант:

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

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

---

Контур прямоугольника

Прямоугольник может отображаться только как рамка.

viewer.entities.add({
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
            20,
            30,
            30,
            40
        ),
        fill: false,
        outline: true,
        outlineColor: Cesium.Color.YELLOW
    }
});

Параметры:

Свойство	Назначение
fill	Включает заливку
outline	Включает контур
outlineColor	Цвет контура

---

Толщина границ

Следует учитывать важную особенность WebGL.

Во многих браузерах:

outlineWidth

игнорируется.

Например:

outlineWidth: 10

может не давать видимого эффекта.

Это связано с ограничениями реализации OpenGL и WebGL на конкретной платформе.

---

Высота прямоугольника

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

Для подъёма используется свойство:

height

Пример:

viewer.entities.add({
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
            10,
            45,
            20,
            50
        ),
        height: 5000,
        material: Cesium.Color.GREEN.withAlpha(0.5)
    }
});

Высота задаётся в метрах.

---

Экструдированные прямоугольники

Прямоугольник можно превратить в объёмный объект.

viewer.entities.add({
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
            10,
            45,
            20,
            50
        ),
        extrudedHeight: 20000,
        material: Cesium.Color.ORANGE
    }
});

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

---

Комбинация высоты и экструзии

Можно одновременно задать базовую и конечную высоту.

viewer.entities.add({
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
            10,
            45,
            20,
            50
        ),
        height: 10000,
        extrudedHeight: 30000,
        material: Cesium.Color.CYAN
    }
});

В этом случае:

• нижняя грань располагается на высоте 10 км;
• верхняя грань располагается на высоте 30 км.

---

Вращение прямоугольника

Для поворота используется параметр:

rotation

Значение задаётся в радианах.

rectangle: {
    coordinates: rectangle,
    rotation: Cesium.Math.toRadians(45)
}

Поворот выполняется относительно центра фигуры.

---

Поворот текстуры

Отдельно можно вращать материал.

stRotation

Пример:

rectangle: {
    coordinates: rectangle,
    material: imageMaterial,
    stRotation: Cesium.Math.toRadians(90)
}

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

---

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

В качестве материала может выступать изображение.

viewer.entities.add({
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(
            -120,
            30,
            -100,
            40
        ),
        material: "images/map.png"
    }
});

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

---

Шахматный материал

Cesium поддерживает процедурные материалы.

material: new Cesium.CheckerboardMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.BLACK,
    repeat: new Cesium.Cartesian2(8, 8)
})

Результатом становится шахматная сетка.

---

Полосатый материал

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

Подходит для выделения зон наблюдения и служебных областей.

---

Отображение по рельефу

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

heightReference:
    Cesium.HeightReference.CLAMP_TO_GROUND

Пример:

viewer.entities.add({
    rectangle: {
        coordinates: area,
        material: Cesium.Color.RED.withAlpha(0.4),
        heightReference:
            Cesium.HeightReference.CLAMP_TO_GROUND
    }
});

Объект будет повторять рельеф местности.

---

Коридоры

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

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

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

---

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

viewer.entities.add({
    corridor: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            10, 50,
            20, 52,
            30, 48
        ]),
        width: 10000,
        material: Cesium.Color.BLUE
    }
});

Здесь:

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

---

Формирование маршрута

Коридор строится по массиву координат.

Cesium.Cartesian3.fromDegreesArray([
    lon1, lat1,
    lon2, lat2,
    lon3, lat3
]);

Каждая пара значений задаёт очередную вершину маршрута.

---

Ширина коридора

Параметр:

width

обязателен.

Пример:

width: 5000

Ширина задаётся в метрах.

---

Цвет коридора

corridor: {
    positions: positions,
    width: 8000,
    material: Cesium.Color.GREEN
}

Для прозрачности:

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

---

Контур коридора

viewer.entities.add({
    corridor: {
        positions: positions,
        width: 12000,
        material: Cesium.Color.BLUE,
        outline: true,
        outlineColor: Cesium.Color.WHITE
    }
});

Контур позволяет сделать маршрут заметнее на сложном фоне.

---

Высота коридора

Подъём над поверхностью:

corridor: {
    positions: positions,
    width: 10000,
    height: 3000,
    material: Cesium.Color.RED
}

Коридор будет находиться на высоте 3 км.

---

Объёмные коридоры

Экструзия превращает плоский маршрут в трёхмерный объект.

viewer.entities.add({
    corridor: {
        positions: positions,
        width: 15000,
        extrudedHeight: 20000,
        material: Cesium.Color.ORANGE
    }
});

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

• воздушных коридоров;
• охранных зон;
• пространственных ограничений.

---

Высота и экструзия одновременно

corridor: {
    positions: positions,
    width: 10000,
    height: 5000,
    extrudedHeight: 15000,
    material: Cesium.Color.CYAN
}

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

---

Типы соединений сегментов

При изменении направления маршрута формируются углы.

Cesium поддерживает несколько вариантов соединений.

Скруглённые углы

cornerType: Cesium.CornerType.ROUNDED

Это значение используется по умолчанию.

Углы становятся плавными.

---

Скошенные углы

cornerType: Cesium.CornerType.BEVELED

Угол срезается прямой линией.

---

Острые углы

cornerType: Cesium.CornerType.MITERED

Сегменты пересекаются в точке.

Такой вариант визуально напоминает классические полилинии.

---

Сравнение типов углов

ROUNDED

------)
     )

BEVELED

------/
     /

MITERED

------\
       \

Выбор зависит от назначения объекта и масштаба отображения.

---

Коридоры по поверхности Земли

Для привязки к рельефу применяется:

heightReference:
    Cesium.HeightReference.CLAMP_TO_GROUND

Пример:

viewer.entities.add({
    corridor: {
        positions: positions,
        width: 5000,
        material: Cesium.Color.YELLOW,
        heightReference:
            Cesium.HeightReference.CLAMP_TO_GROUND
    }
});

Маршрут будет повторять форму местности.

---

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

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

corridor: {
    positions: positions,
    width: 10000,
    material: "images/road.png"
}

Часто применяется для имитации:

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

---

Динамическое изменение маршрута

Поскольку свойства сущностей могут быть динамическими, маршрут допускается изменять во время работы приложения.

const corridorPositions =
    new Cesium.CallbackProperty(() => {
        return currentPositions;
    }, false);

Использование:

corridor: {
    positions: corridorPositions,
    width: 10000
}

Подобный механизм применяется при:

• отслеживании транспорта;
• отображении перемещения объектов;
• визуализации результатов расчётов в реальном времени;
• моделировании траекторий.

---

Производительность при работе с большим количеством объектов

При отображении множества прямоугольников и коридоров рекомендуется:

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

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

---

Совместное использование прямоугольников и коридоров

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

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

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