Cesium学习笔记4——几何体绘制

太一吾鱼水 / 2023-07-10 / 原文

引用:Sandcastle-header.js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="utf-8" />
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6     <meta
 7       name="viewport"
 8       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
 9     />
10     <meta name="description" content="Draw a cylinder or cone.">
11     <meta name="cesium-sandcastle-labels" content="Geometries">
12     <title>Cesium Demo</title>
13     <script type="text/javascript" src="../Sandcastle-header.js"></script>
14     <script type="module" src="../load-cesium-es6.js"></script>
15   </head>
16   <body
17     class="sandcastle-loading"
18     data-sandcastle-bucket="bucket-requirejs.html"
19   >
20   <style>
21     @import url(../Build/CesiumUnminified/Widgets/widgets.css);
22     html,
23     body,
24     #cesiumContainer {
25       width: 100%;
26       height: 100%;
27       margin: 0;
28       padding: 0;
29       overflow: hidden;
30     }
31   </style>
32   <div id="cesiumContainer" class="fullSize"></div>
33   <div id="loadingOverlay"><h1>Loading...</h1></div>
34   <div id="toolbar"></div>
35   <script id="cesium_sandcastle_script">
36   window.startup = async function (Cesium) {
37     'use strict';
38     Cesium.Ion.defaultAccessToken='你的Token';//采样默认的Token
39     //Sandcastle_Begin
40     const viewer = new Cesium.Viewer("cesiumContainer");
41 
42   const greenCylinder = viewer.entities.add({
43     name: "Green cylinder with black outline",
44     position: Cesium.Cartesian3.fromDegrees(120.0, 32.0, 200000.0),
45     cylinder: {
46       length: 400000.0,
47       topRadius: 200000.0,
48       bottomRadius: 200000.0,
49       material: Cesium.Color.GREEN.withAlpha(0.5),
50       outline: true,
51       outlineColor: Cesium.Color.DARK_GREEN,
52     },
53   });
54 
55   const redCone = viewer.entities.add({
56     name: "Red cone",
57     position: Cesium.Cartesian3.fromDegrees(115.0, 32.0, 200000.0),
58     cylinder: {
59       length: 400000.0,
60       topRadius: 0.0,
61       bottomRadius: 200000.0,
62       material: Cesium.Color.RED,
63     },
64   });
65 
66   viewer.zoomTo(viewer.entities);
67   //Sandcastle_End
68   Sandcastle.finishedLoading();
69   };
70 
71   if (typeof Cesium !== 'undefined') {
72     window.startupCalled = true;
73     window.startup(Cesium).catch((error) => {
74       "use strict";
75       console.error(error);
76     });
77   }
78   </script>
79 </body>
80 </html>

客户端访问效果: