cesiumjsczml

Creating a pyramid with polygon base in CZML


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?


Solution

  • 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);