{"id":1711,"date":"2016-12-13T19:43:36","date_gmt":"2016-12-13T19:43:36","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1711"},"modified":"2016-12-13T19:43:36","modified_gmt":"2016-12-13T19:43:36","slug":"cesium-how-to-show-pyramid-with-polygon-base-in-czml","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2016\/12\/cesium-how-to-show-pyramid-with-polygon-base-in-czml\/","title":{"rendered":"Cesium &#8211; How to show pyramid with polygon base in CZML ?"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/12\/phpmind-Cesium-pyramid-with-polygon.png\" alt=\"\" width=\"790\" height=\"409\" class=\"aligncenter size-full wp-image-1712\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/12\/phpmind-Cesium-pyramid-with-polygon.png 790w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/12\/phpmind-Cesium-pyramid-with-polygon-300x155.png 300w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/12\/phpmind-Cesium-pyramid-with-polygon-768x398.png 768w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/12\/phpmind-Cesium-pyramid-with-polygon-624x323.png 624w\" sizes=\"auto, (max-width: 790px) 100vw, 790px\" \/><\/p>\n<pre>\r\n\r\n\r\n    var czml = [\r\n      {\r\n        \"id\" : \"document\",\r\n        \"name\" : \"CZML Geometries: Polygon\",\r\n        \"version\" : \"1.0\"\r\n      }, {\r\n        \"id\" : \"orangePolygon\",\r\n        \"name\" : \"Orange polygon with per-position heights and outline\",\r\n        \"polygon\" : {\r\n          \"positions\" : {\r\n            \"cartographicDegrees\" : [\r\n              -70.0, 35.0, 100000,\r\n              -72.0, 37.0, 0,\r\n              -68.0, 35.0, 0\r\n            ]\r\n          },\r\n          \"material\" : {\r\n            \"solidColor\" : {\r\n              \"color\" : {\r\n                \"rgba\" : [255, 100, 0, 100]\r\n              }\r\n            }\r\n          },\r\n      \"extrudedHeight\" : 0,\r\n      \"perPositionHeight\" : true,\r\n      \"outline\" : true,\r\n      \"outlineColor\" : {\r\n        \"rgba\" : [0, 0, 0, 255]\r\n      }\r\n    }\r\n  },\r\n\r\n\r\n    {\r\n    \"id\" : \"orangePolygon2\",\r\n    \"name\" : \"Orange polygon with per-position heights and outline\",\r\n    \"polygon\" : {\r\n      \"positions\" : {\r\n        \"cartographicDegrees\" : [\r\n          -70.0, 35.0, 100000,\r\n          -70.0, 33.0, 0,\r\n          -68.0, 35.0, 0\r\n        ]\r\n      },\r\n      \"material\" : {\r\n        \"solidColor\" : {\r\n          \"color\" : {\r\n            \"rgba\" : [255, 100, 0, 100]\r\n          }\r\n        }\r\n      },\r\n      \"extrudedHeight\" : 0,\r\n      \"perPositionHeight\" : true,\r\n      \"outline\" : true,\r\n      \"outlineColor\" : {\r\n        \"rgba\" : [0, 0, 0, 255]\r\n      }\r\n    }\r\n  },\r\n\r\n    {\r\n    \"id\" : \"orangePolygon3\",\r\n    \"name\" : \"Orange polygon with per-position heights and outline\",\r\n    \"polygon\" : {\r\n      \"positions\" : {\r\n        \"cartographicDegrees\" : [\r\n          -70.0, 35.0, 100000,\r\n          -70.0, 33.0, 0,\r\n          -72.0, 37.0, 0,\r\n        ]\r\n      },\r\n      \"material\" : {\r\n        \"solidColor\" : {\r\n          \"color\" : {\r\n            \"rgba\" : [255, 100, 0, 100]\r\n          }\r\n        }\r\n      },\r\n      \"extrudedHeight\" : 0,\r\n      \"perPositionHeight\" : true,\r\n      \"outline\" : true,\r\n      \"outlineColor\" : {\r\n        \"rgba\" : [0, 0, 0, 255]\r\n      }\r\n    }\r\n  }\r\n];\r\n\r\nvar viewer = new Cesium.Viewer('cesiumContainer');\r\nvar dataSource = Cesium.CzmlDataSource.load(czml);\r\nviewer.dataSources.add(dataSource);\r\nviewer.zoomTo(dataSource);\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>var czml = [ { &#8220;id&#8221; : &#8220;document&#8221;, &#8220;name&#8221; : &#8220;CZML Geometries: Polygon&#8221;, &#8220;version&#8221; : &#8220;1.0&#8221; }, { &#8220;id&#8221; : &#8220;orangePolygon&#8221;, &#8220;name&#8221; : &#8220;Orange polygon with per-position heights and outline&#8221;, &#8220;polygon&#8221; : { &#8220;positions&#8221; : { &#8220;cartographicDegrees&#8221; : [ -70.0, 35.0, 100000, -72.0, 37.0, 0, -68.0, 35.0, 0 ] }, &#8220;material&#8221; : { &#8220;solidColor&#8221; : [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[53,27],"tags":[],"class_list":["post-1711","post","type-post","status-publish","format-standard","hentry","category-cesiumjs","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1711"}],"version-history":[{"count":1,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1711\/revisions"}],"predecessor-version":[{"id":1713,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1711\/revisions\/1713"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}