Creating a pyramid with polygon base in CZML

Question

I am new in Cesium, CZML and javascript, I am trying to create a pyramid with polygon base on the ground. I have the latitude and longitude the height of its top point, I have the angle of each side. I couldn't find any good method to create it yet. Is there any way that I can create it in CZML file?

What is this for? [Cesium Pro](https://cesium.agi.com/products/cesium-pro/default.aspx) has a concept of a "sensor" on an aircraft or spacecraft that can view a portion of the Earth, taking terrain into account. Open-source Cesium had a very early prototype of this, but it was moved into a plugin and I don't know if it's still compatible. Or are you trying to do something completely different from this? If so can you explain in more detail? — emackey, Sep 27 '15 at 13:37
@emackey yes, eventually I want to use it as the undercover area of a sensor on the aircraft. So you mean in the open_source version of the software there is no easy way to do this. So it's maybe better for me to create a polygon and maybe define some polylines to show the area! — azar, Sep 27 '15 at 22:02
Looks like the [old sensor plugin](https://github.com/AnalyticalGraphicsInc/cesium-sensors) was last updated for Cesium 1.6, in Feb 2015. You can also try using polygons/polylines, as you suggest. — emackey, Sep 28 '15 at 13:46
@emackey I am using SandCastle example as a source to help me with my project, but I couldn't set it up in a way that this plugin works for that. It will misses cesium.js, Do you know how I can set it up in a way that has this plug in? — azar, Sep 28 '15 at 21:25

CM0491 · Accepted Answer · 2016-02-24T16:19:34.417

I'm not sure if this can be done with one single packet. However, it can certainly be done with one single czml object. Go to this website: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html

and paste in the code below. It will give you a good starting point. You may wish to change are the opacity if you dont want it to be see-through. And you may wish to remove the outline of the polygon edges if you dont want anyone to see how you built the pyramid out of multiple polygons.

The "pyramid" that I made for you is 3 sided. You could extend this to include as many sides you wish.

    var czml = [
      {
        "id" : "document",
        "name" : "CZML Geometries: Polygon",
        "version" : "1.0"
      }, {
        "id" : "orangePolygon",
        "name" : "Orange polygon with per-position heights and outline",
        "polygon" : {
          "positions" : {
            "cartographicDegrees" : [
              -70.0, 35.0, 100000,
              -72.0, 37.0, 0,
              -68.0, 35.0, 0
            ]
          },
          "material" : {
            "solidColor" : {
              "color" : {
                "rgba" : [255, 100, 0, 100]
              }
            }
          },
      "extrudedHeight" : 0,
      "perPositionHeight" : true,
      "outline" : true,
      "outlineColor" : {
        "rgba" : [0, 0, 0, 255]
      }
    }
  },


    {
    "id" : "orangePolygon2",
    "name" : "Orange polygon with per-position heights and outline",
    "polygon" : {
      "positions" : {
        "cartographicDegrees" : [
          -70.0, 35.0, 100000,
          -70.0, 33.0, 0,
          -68.0, 35.0, 0
        ]
      },
      "material" : {
        "solidColor" : {
          "color" : {
            "rgba" : [255, 100, 0, 100]
          }
        }
      },
      "extrudedHeight" : 0,
      "perPositionHeight" : true,
      "outline" : true,
      "outlineColor" : {
        "rgba" : [0, 0, 0, 255]
      }
    }
  },

    {
    "id" : "orangePolygon3",
    "name" : "Orange polygon with per-position heights and outline",
    "polygon" : {
      "positions" : {
        "cartographicDegrees" : [
          -70.0, 35.0, 100000,
          -70.0, 33.0, 0,
          -72.0, 37.0, 0,
        ]
      },
      "material" : {
        "solidColor" : {
          "color" : {
            "rgba" : [255, 100, 0, 100]
          }
        }
      },
      "extrudedHeight" : 0,
      "perPositionHeight" : true,
      "outline" : true,
      "outlineColor" : {
        "rgba" : [0, 0, 0, 255]
      }
    }
  }
];

var viewer = new Cesium.Viewer('cesiumContainer');
var dataSource = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);

Thank you, it is very helpful. I combined all of your defined polygons into one and now I can have all just in one packet as follows: "cartographicDegrees" : [ -70.0, 35.0, 100000, -72.0, 37.0, 0, -68.0, 35.0, 0 , -70.0, 35.0, 100000, -68.0, 35.0, 0 , -70.0, 33.0, 0, -70.0, 35.0, 100000, -70.0, 33.0, 0, -72.0, 37.0, 0 ] — azar, Feb 18 '16 at 01:44
Ah nice call. That cuts down the code a bunch. I updated my answer to reflect your improvement. — CM0491, Feb 18 '16 at 21:25
I think we still need multiple CZML entity, it seems that I will loose the side walls when I am using the way that I presented :(. I guess your original answer was correct . — azar, Feb 23 '16 at 20:01
Ah that's too bad, I liked the code length reduction. I'll revert it back to the original. — CM0491, Feb 24 '16 at 16:18

Creating a pyramid with polygon base in CZML

1 Answers1