圓柱圓錐體
<!DOCTYPE html> <html> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Hello World!</title> <script src="../Cesium/Build/Cesium/Cesium.js"></script> <style> @import url(../Cesium/Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script> var viewer = new Cesium.Viewer('cesiumContainer'); var greenCylinder = viewer.entities.add({//Cylinder圓柱體 name : 'Green cylinder with black outline', position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0), cylinder : { length : 400000.0, topRadius : 200000.0,//圓柱體的頂部半徑。 bottomRadius : 200000.0,// 圓柱體底部的半徑。 material : Cesium.Color.GREEN.withAlpha(0.5),//綠色半透明 outline : true,//輪廓 outlineColor : Cesium.Color.DARK_GREEN//輪廓顏色深綠色 } }); var redCone = viewer.entities.add({//紅色圓錐體 name : 'Red cone', position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0), cylinder : { length : 400000.0, topRadius : 0.0, bottomRadius : 200000.0, material : Cesium.Color.RED } }); viewer.zoomTo(viewer.entities); </script> </body> </html>
<!DOCTYPE html> <html> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Hello World!</title> <script src="../Cesium/Build/Cesium/Cesium.js"></script> <style> @import url(../Cesium/Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script> var viewer = new Cesium.Viewer('cesiumContainer'); var redPolygon = viewer.entities.add({//紅色多邊形 name : 'Red polygon on surface', polygon : { hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0, -115.0, 32.0, -107.0, 33.0, -102.0, 31.0, -102.0, 35.0]),//hierarchy多邊形層次 material : Cesium.Color.RED } }); var greenPolygon = viewer.entities.add({//綠色多邊形 name : 'Green extruded polygon', polygon : { hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0, -100.0, 42.0, -104.0, 40.0]), extrudedHeight: 500000.0,//多邊形的擠出面和橢圓面之間的距離（以米為單位） material : Cesium.Color.GREEN, closeTop : false, closeBottom : false } }); var orangePolygon = viewer.entities.add({//橙色多邊形 name : 'Orange polygon with per-position heights and outline', polygon : { hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([-108.0, 25.0, 100000, -100.0, 25.0, 100000, -100.0, 30.0, 100000, -108.0, 30.0, 300000]), extrudedHeight: 0,//多邊形的擠出面和橢圓面之間的距離（以米為單位）。 perPositionHeight : true,//對每個位置使用options.positions的height，而不使用options.height來確定高度 material : Cesium.Color.ORANGE.withAlpha(0.5),//橘色半透明 outline : true, outlineColor : Cesium.Color.BLACK//黑色輪廓線 } }); var bluePolygon = viewer.entities.add({//藍色多邊形 name : 'Blue polygon with holes and outline', polygon : { hierarchy : { positions : Cesium.Cartesian3.fromDegreesArray([-99.0, 30.0, -85.0, 30.0, -85.0, 40.0, -99.0, 40.0]), holes : [{ positions : Cesium.Cartesian3.fromDegreesArray([ -97.0, 31.0, -97.0, 39.0, -87.0, 39.0, -87.0, 31.0 ]), holes : [{ positions : Cesium.Cartesian3.fromDegreesArray([ -95.0, 33.0, -89.0, 33.0, -89.0, 37.0, -95.0, 37.0 ]), holes : [{ positions : Cesium.Cartesian3.fromDegreesArray([ -93.0, 34.0, -91.0, 34.0, -91.0, 36.0, -93.0, 36.0 ]) }] }] }] }, material : Cesium.Color.BLUE.withAlpha(0.5), outline : true, outlineColor : Cesium.Color.BLACK } }); viewer.zoomTo(viewer.entities); </script> </body> </html>
<!DOCTYPE html> <html> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>Hello World!</title> <script src="../Cesium/Build/Cesium/Cesium.js"></script> <style> @import url(../Cesium/Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script> var viewer = new Cesium.Viewer('cesiumContainer'); var redLine = viewer.entities.add({ name : 'Red line on the surface', polyline : { positions : Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]), width : 5,//多段線的寬度（以像素為單位）。 material : Cesium.Color.RED } }); var glowingLine = viewer.entities.add({ name : 'Glowing blue line on the surface', polyline : { positions : Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]), width : 10, material : new Cesium.PolylineGlowMaterialProperty({ glowPower : 0.2,//發光強度的屬性，以總線寬度的百分比表示。 color : Cesium.Color.BLUE }) } }); var orangeOutlined = viewer.entities.add({ name : 'Orange line with black outline at height and following the surface', polyline : { positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 39, 250000, -125, 39, 250000]), width : 5, material : new Cesium.PolylineOutlineMaterialProperty({ color : Cesium.Color.ORANGE, outlineWidth : 2, outlineColor : Cesium.Color.BLACK }) } }); var purpleArrow = viewer.entities.add({ name : 'Purple straight arrow at height', polyline : { positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000, -125, 43, 500000]), width : 10, followSurface : false, material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE) } }); viewer.zoomTo(viewer.entities); </script> </body> </html> </script> </body> </html>
