---恢復內容開始---
1.多邊形
我們要從經度和緯度列表中為美國懷俄明州添加一個多邊形。（懷俄明被選中是因為它是一個簡單的多邊形。）我們可以復制並粘貼以下代碼到Sandcastle中：
<!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'); //Cesium.Viewer （容器)用於構建應用程序的基本構件。 var wyoming = viewer.entities.add({//添加實體到容器中，給實體命名為“Wyoming” name : 'Wyoming', polygon : {//polygon是多邊形 Cesium.PolygonHierarchy （positions, holes） hierarchy : Cesium.Cartesian3.fromDegreesArray([//hierarchy分層（位置，孔） -109.080842,45.002073, -105.91517,45.002073, -104.058488,44.996596, -104.053011,43.002989, -104.053011,41.003906, -105.728954,40.998429, -107.919731,41.003906, -109.04798,40.998429, -111.047063,40.998429, -111.047063,42.000709, -111.047063,44.476286, -111.05254,45.002073]), height : 0, material : Cesium.Color.RED.withAlpha(0.5),//使用紅色，綠色，藍色和alpha值指定的顏色，范圍從0（無強度）到1.0（全強度）。 outline : true,//幾何輪廓存在 outlineColor : Cesium.Color.BLACK//設置輪廓顏色為黑色 } }); viewer.zoomTo(wyoming);//zoomTo （target，offset）目標和偏移 </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 blueBox = viewer.entities.add({//藍色盒子 name : 'Blue box', position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),//三維笛卡爾點（x，y，z） box : { dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),//dimensions 尺寸 material : Cesium.Color.BLUE//材質藍色 } }); var redBox = viewer.entities.add({//紅色盒子 name : 'Red box with black outline', position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0), box : { dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), material : Cesium.Color.RED.withAlpha(0.5), outline : true, outlineColor : Cesium.Color.BLACK } }); var outlineOnly = viewer.entities.add({//黃色盒子 name : 'Yellow box outline', position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0), box : { dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), fill : false, outline : true, outlineColor : Cesium.Color.YELLOW } }); 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> <!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 greenCircle = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0), name : 'Green circle at height', ellipse : {//Ellipse橢圓 semiMinorAxis : 300000.0,//semiMinorAxis橢圓半短軸的長度（以米為單位） semiMajorAxis : 300000.0,//semiMajorAxis橢圓半長軸的長度（以米為單位） height: 200000.0,//橢圓和橢球面之間的距離，單位為米。 material : Cesium.Color.GREEN//綠色 } }); var redEllipse = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0), name : 'Red ellipse on surface with outline', ellipse : { semiMinorAxis : 250000.0, semiMajorAxis : 400000.0, material : Cesium.Color.RED.withAlpha(0.5),//材質為紅色半透明 outline : true,//輪廓 outlineColor : Cesium.Color.RED//輪廓顏色為紅色 } }); var blueEllipse = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0), name : 'Blue translucent, rotated, and extruded ellipse with outline', ellipse : { semiMinorAxis : 150000.0, semiMajorAxis : 300000.0, extrudedHeight : 200000.0, rotation : Cesium.Math.toRadians(45),//從北向逆時針旋轉的角度 material : Cesium.Color.BLUE.withAlpha(0.5),//藍色半透明 outline : true//輪廓 } }); viewer.zoomTo(viewer.entities); </script> </body> </html> </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> <!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 redCorridor = viewer.entities.add({ name : 'Red corridor on surface with rounded corners and outline', corridor : {//走廊 positions : Cesium.Cartesian3.fromDegreesArray([//定義走廊中心的位置數組。 -100.0, 40.0, -105.0, 40.0, -105.0, 35.0 ]), width : 200000.0,//走廊邊緣之間的距離，以米為單位 material : Cesium.Color.RED.withAlpha(0.5),//材質為紅色半透明 outline : true,//輪廓 outlineColor : Cesium.Color.RED//輪廓顏色紅色 } }); var greenCorridor = viewer.entities.add({ name : 'Green corridor at height with mitered corners', corridor : { positions : Cesium.Cartesian3.fromDegreesArray([ -90.0, 40.0, -95.0, 40.0, -95.0, 35.0 ]), height: 100000.0, width : 200000.0, cornerType: Cesium.CornerType.MITERED,//確定角的樣式。Cesium.CornerType.BEVELED 角被剪切；Cesium.CornerType.MITERED角點是相鄰邊的交點；Cesium.CornerType.ROUNDED角有光滑的邊緣 material : Cesium.Color.GREEN//材質為綠色 } }); var blueCorridor = viewer.entities.add({ name : 'Blue extruded corridor with beveled corners and outline', corridor : { positions : Cesium.Cartesian3.fromDegreesArray([ -80.0, 40.0, -85.0, 40.0, -85.0, 35.0 ]), height : 200000.0, extrudedHeight : 100000.0,//橢圓表面和擠壓面之間的距離（米）。 width : 200000.0, cornerType: Cesium.CornerType.BEVELED, material : Cesium.Color.BLUE.withAlpha(0.5), outline : true, outlineColor : Cesium.Color.BLUE } }); viewer.zoomTo(viewer.entities); </script> </body> </html> </script> </body> </html>
