Окружности и эллипсы

Окружности и эллипсы относятся к числу базовых геометрических примитивов CesiumJS и широко применяются для отображения зон покрытия, радиусов действия объектов, охраняемых территорий, областей наблюдения, авиационных маршрутов, буферных зон и различных аналитических данных. В основе их построения лежит система сущностей (Entity API), которая автоматически преобразует геометрические параметры в трехмерное представление на поверхности земного эллипсоида.

Создание окружности

В CesiumJS окружность создается с помощью графического объекта ellipse, у которого значения большой и малой полуосей совпадают.

Простейший пример:

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(37.6173, 55.7558),
    ellipse: {
        semiMajorAxis: 5000,
        semiMinorAxis: 5000,
        material: Cesium.Color.BLUE.withAlpha(0.5)
    }
});

В данном случае:

  • центр окружности расположен в указанных координатах;
  • радиус составляет 5000 метров;
  • используется полупрозрачная синяя заливка.

Несмотря на то что визуально отображается окружность, технически Cesium создает эллипс с одинаковыми полуосями.

Параметры окружности

Основными характеристиками являются:

Параметр Описание
semiMajorAxis Большая полуось
semiMinorAxis Малая полуось
material Материал заполнения
height Высота над поверхностью
extrudedHeight Высота экструзии
outline Отображение контура
outlineColor Цвет контура
rotation Поворот фигуры

Пример с контуром:

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(37.6173, 55.7558),
    ellipse: {
        semiMajorAxis: 10000,
        semiMinorAxis: 10000,
        material: Cesium.Color.GREEN.withAlpha(0.3),
        outline: true,
        outlineColor: Cesium.Color.DARKGREEN
    }
});

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

Эллипсы

Эллипс отличается от окружности различными значениями полуосей.

Пример:

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(30.3141, 59.9386),
    ellipse: {
        semiMajorAxis: 15000,
        semiMinorAxis: 7000,
        material: Cesium.Color.RED.withAlpha(0.4)
    }
});

Полученная фигура будет вытянута вдоль направления большой полуоси.

Подобные объекты используются для:

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

Ориентация эллипса

По умолчанию большая полуось направлена на север. Для изменения ориентации применяется параметр rotation.

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

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(30.3141, 59.9386),
    ellipse: {
        semiMajorAxis: 20000,
        semiMinorAxis: 10000,
        rotation: Cesium.Math.toRadians(45),
        material: Cesium.Color.ORANGE.withAlpha(0.5)
    }
});

В данном примере эллипс поворачивается на 45 градусов относительно направления на север.

Высота размещения

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

Для поднятия фигуры используется свойство height.

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(37.6173, 55.7558),
    ellipse: {
        semiMajorAxis: 8000,
        semiMinorAxis: 8000,
        height: 3000,
        material: Cesium.Color.YELLOW.withAlpha(0.5)
    }
});

Фигура будет размещена на высоте 3000 метров над уровнем эллипсоида.

Подобный подход полезен при моделировании:

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

Экструдированные окружности и эллипсы

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

Для этого применяется параметр extrudedHeight.

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(37.6173, 55.7558),
    ellipse: {
        semiMajorAxis: 5000,
        semiMinorAxis: 5000,
        material: Cesium.Color.CYAN.withAlpha(0.6),
        extrudedHeight: 10000
    }
});

В результате формируется цилиндрическая конструкция высотой 10 километров.

Для эллипса получится эллиптический объем:

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(30.3141, 59.9386),
    ellipse: {
        semiMajorAxis: 15000,
        semiMinorAxis: 7000,
        extrudedHeight: 12000,
        material: Cesium.Color.PURPLE.withAlpha(0.5)
    }
});

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

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

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

Заполнение окружностей и эллипсов поддерживает различные материалы.

Сплошной цвет

material: Cesium.Color.RED

Полупрозрачный цвет

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

Шахматный узор

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.YELLOW,
    oddColor: Cesium.Color.RED,
    repeat: 10
})

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

Границы без заливки

Иногда требуется показать только контур.

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(37.6173, 55.7558),
    ellipse: {
        semiMajorAxis: 12000,
        semiMinorAxis: 12000,
        fill: false,
        outline: true,
        outlineColor: Cesium.Color.WHITE
    }
});

Такой способ снижает визуальную нагрузку при отображении большого количества объектов.

Управление детализацией

Окружности и эллипсы в Cesium фактически состоят из множества сегментов.

Количество сегментов задается параметром granularity.

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(37.6173, 55.7558),
    ellipse: {
        semiMajorAxis: 20000,
        semiMinorAxis: 20000,
        granularity: Cesium.Math.toRadians(1),
        material: Cesium.Color.GREEN.withAlpha(0.4)
    }
});

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

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

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

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

let radius = 1000;

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(37.6173, 55.7558),
    ellipse: {
        semiMajorAxis: new Cesium.CallbackProperty(() => radius, false),
        semiMinorAxis: new Cesium.CallbackProperty(() => radius, false),
        material: Cesium.Color.BLUE.withAlpha(0.5)
    }
});

setInterval(() => {
    radius += 500;
}, 1000);

Радиус будет увеличиваться каждую секунду.

Подобная техника применяется для:

  • отображения распространяющихся сигналов;
  • зон обнаружения;
  • анимации волн;
  • аналитических визуализаций.

Динамический поворот эллипса

Поворот также может изменяться во времени.

let angle = 0;

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(30.3141, 59.9386),
    ellipse: {
        semiMajorAxis: 15000,
        semiMinorAxis: 6000,
        rotation: new Cesium.CallbackProperty(() => {
            angle += 0.01;
            return angle;
        }, false),
        material: Cesium.Color.ORANGE.withAlpha(0.5)
    }
});

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

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

Cesium позволяет связывать параметры эллипса с временной шкалой.

const property = new Cesium.SampledProperty(Number);

property.addSample(
    Cesium.JulianDate.fromIso8601("2025-01-01T00:00:00Z"),
    5000
);

property.addSample(
    Cesium.JulianDate.fromIso8601("2025-01-01T00:10:00Z"),
    15000
);

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(37.6173, 55.7558),
    ellipse: {
        semiMajorAxis: property,
        semiMinorAxis: property,
        material: Cesium.Color.CYAN.withAlpha(0.5)
    }
});

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

Привязка к рельефу

Для работы с трехмерным рельефом используется параметр heightReference.

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(86.9250, 27.9881),
    ellipse: {
        semiMajorAxis: 3000,
        semiMinorAxis: 3000,
        material: Cesium.Color.WHITE.withAlpha(0.4),
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
    }
});

Фигура будет повторять высоту поверхности в выбранной точке.

Доступны основные режимы:

Cesium.HeightReference.NONE
Cesium.HeightReference.CLAMP_TO_GROUND
Cesium.HeightReference.RELATIVE_TO_GROUND

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

Создание множества окружностей

Часто требуется отображать большое количество зон.

const cities = [
    [37.6173, 55.7558],
    [30.3141, 59.9386],
    [49.1064, 55.7961]
];

cities.forEach(city => {
    viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(city[0], city[1]),
        ellipse: {
            semiMajorAxis: 5000,
            semiMinorAxis: 5000,
            material: Cesium.Color.BLUE.withAlpha(0.3)
        }
    });
});

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

Практические сценарии применения

Радиусы действия объектов

ellipse: {
    semiMajorAxis: 25000,
    semiMinorAxis: 25000
}

Используется для отображения дальности связи, действия сенсоров или вооружения.

Зоны наблюдения

ellipse: {
    semiMajorAxis: 40000,
    semiMinorAxis: 15000,
    rotation: heading
}

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

Буферные зоны

ellipse: {
    semiMajorAxis: 1000,
    semiMinorAxis: 1000
}

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

Воздушные ограничения

ellipse: {
    semiMajorAxis: 5000,
    semiMinorAxis: 5000,
    extrudedHeight: 15000
}

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

Особенности производительности

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

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

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

Сравнение окружностей и эллипсов

Характеристика Окружность Эллипс
Большая полуось Равна малой Отличается
Симметрия Полная Частичная
Поддержка поворота Практически не заметна Имеет значение
Типичные сценарии Радиусы и зоны покрытия Области наблюдения и анализа
Экструзия Цилиндрический объем Эллиптический объем

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

Оглавление