Extruded Polygon with Height (Airspace)

CesiumJS
1

Hello Group,

What's the state of the art in Cesium for creating a Polygon with height and extrusion? For example, an airspace. I see one earlier forum post suggesting separate polygons representing TOP, BOTTOM, SIDE_A, SIDE_B, SIDE_C, SIDE_N. Is this work-around still the state of things for representing an airspace?

Thank you!

2

You have three options, all which use the same back-end but depend on your goals as a whole.

  1. If you want low-level control over everything and work with Cesium graphics primitives, use Geometry & Appearances. Here’s our turial: http://cesiumjs.org/2013/11/04/Geometry-and-Appearances/ (part 2 in development). You can simple use the ExtentGeometry to easily do what you want.

  2. If you have a custom data source you want to ingest, you can implement a DataSource plug-in. Instead of creating primitives directly, you simply tell Cesium what you data is and we figure out the most efficient way to visualized it. So if you have a ton of data of different types, this is probably the easiest/best way to ensure that everything is rendered as efficiently as possible. It also means that if we improve our DataSource visualization, you get performance improvements for free.

  3. If you want to preprocess your data ahead of time, you can generate CZML files and then simply load them with CzmlDataSource. If you have a bunch of data that isn’t going to change and is not in a web-friendly format (thus making 2 above difficult) this is the way to go.

Finally, if I gave way more of an involved answer then you were looking for. Click here and you’ll see a working demo with code: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Extent.html&label=Geometries

3

Thank you Matthew,

I was defining all my points like:
Cesium.Cartographic.fromDegrees(-95, 32.0, 10000),

then saying "extrudedHeight : 300000.0" when creating the Cesium.GeometryInstance instance:

Here's the correct code snippet:

var positions = ellipsoid.cartographicArrayToCartesianArray([
        Cesium.Cartographic.fromDegrees(-95, 37.0),
        Cesium.Cartographic.fromDegrees(-95, 32.0),
        Cesium.Cartographic.fromDegrees(-90, 33.0),
        Cesium.Cartographic.fromDegrees(-87, 31.0),
        Cesium.Cartographic.fromDegrees(-87, 35.0)
]);
    
var bluePolygonOutlineInstance = new Cesium.GeometryInstance({
      geometry : Cesium.PolygonOutlineGeometry.fromPositions({
      positions : positions,
      extrudedHeight : 300000.0,
      height : 100000.0
}),
  attributes : {
         color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)
        }
});