Cesium 案例(九)示例中小程序集合(1)

     const viewer = new Cesium.Viewer("cesiumContainer", {
             terrain: Cesium.createWorldTerrain(,
           };
        viewer.scene.globe.depthTestAgainstTerrain = true;
         //如果广告牌、折线、标签等图元应针对地形表面进行深度测试，则为 true；
         //如果此类图元应始终绘制在地形顶部，除非它们位于地球的另一侧，则为 false。
         //针对地形进行深度测试图元的缺点是，轻微的数值噪声或地形细节级别的切换有时会使应该在表面上的图元在其下方消失。
        viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin;
         //使用提供的 mixin 扩展基本查看器功能。
         // mixin 可以向提供的查看器实例添加额外的属性、函数或其他行为。
         //将 Cesium3DTilesInspector 小部件添加到 Viewer 小部件的 mixin。
         //此函数通常不是直接调用，而是作为参数传递给 Viewer#extend，如下例所示。
         //Cesium3DTilesInsector:检查器小部件可帮助调试 3D 瓷砖
         const inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;
         //获取视图模型。
         try {
           const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(75343, {
           //一个 3D Tiles 瓦片 集，用于流式传输海量异构 3D 地理空间数据集
           //似乎废弃的方法
           //新的方法
           // new Cesium.Cesium3DTileset({ // 3d titles
           //url: Cesium.IonResource.fromAssetId(8564,
           // }
         enableDebugWireframe: true,
       };
       viewer.scene.primitives.add(tileset;
              //获取原语的集合。
              viewer.zoomTo(
                tileset,
                new Cesium.HeadingPitchRange(
                  //定义局部框架中的航向角、俯仰角和范围。航向是从当地的北向旋转，正角向东增加。
                  //俯仰是从局部 xy 平面旋转。正俯仰角在平面上方。负俯仰角位于平面下方。
                  //范围是距框架中心的距离。
                  0.0,
                  -0.5,
                  tileset.boundingSphere.radius / 4.0
                  //瓦片集的边界球。具有中心和半径的边界球体
                  // radius球体的半径。
                
                //异步设置相机以查看提供的实体、实体或数据源。
                //如果数据源仍在加载过程中或可视化仍在加载中，则此方法在执行缩放之前等待数据准备好。
                //偏移量是本地东西北上参考系中的航向/俯仰/范围，以边界球的中心为中心。
                //航向角和俯仰角在当地东西北上参考系中定义。航向是从 y 轴到 x 轴增加的角度。俯仰是从 xy 平面的旋转。
                //正俯仰角在平面上方。负俯仰角位于平面下方。范围是到中心的距离。
                //如果范围为零，则将计算范围以使整个边界球体可见。
                //在 2D 中，必须有自上而下的视图。摄像机将放置在目标上方向下看。
                //目标上方的高度将是范围。航向将根据偏移量确定。如果无法根据偏移量确定航向，则航向将为北。
              ;
            } catch (error {
              console.log(`Error loading tileset: ${error}`;
            }

 1  const viewer = new Cesium.Viewer("cesiumContainer";
 2       try {
 3         const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(125737;
 4         viewer.scene.primitives.add(tileset;
 5       } catch (error {
 6         console.log(`Error loading tileset: ${error}`;
 7       }
 8       const initialPosition = new Cesium.Cartesian3(
 9           //初始位置
10           -1111583.3721328347,
11           -5855888.151574568,
12           2262561.444696748
13         ;
14         const initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
15           //表示为航向、俯仰和横滚的旋转。航向是围绕负 z 轴的旋转。
16           //俯仰是围绕负 y 轴的旋转。滚动是围绕正 x 轴的旋转。
17           //初始定向
18           100.0,
19           -15.0,
20           0.0
21         ;
22         //heading     Number     以度为单位的标题
23         //pitch     Number     以度为单位的音高
24         //roll     Number     以度为单位的标题
25         //result     HeadingPitchRoll     可选 存储结果的对象。如果未提供，则创建并返回一个新实例。
26         viewer.scene.camera.setView({
27           destination: initialPosition,
28           orientation: initialOrientation,
29           endTransform: Cesium.Matrix4.IDENTITY,
30           //destination     笛卡尔3 | 长方形     可选 摄像机在 WGS84（世界）坐标中的最终位置，或从自上而下视图可见的矩形。
31           //orientation     HeadingPitchRollValues | 方向向上     可选 包含方向和向上属性或航向、俯仰和滚动属性的对象。默认情况下，方向将指向 3D 中框架的中心，在哥伦布视图中指向负 z 方向。向上方向将指向 3D 中的当地北方，在哥伦布视图中指向正 y 方向。在无限滚动模式下，2D 中不使用方向。
32           //endTransform     矩阵4     可选 的变换矩阵，表示相机的参考框架。
33           //convert     布尔值     可选 是否将目的地从世界坐标转换为场景坐标（仅在不使用 3D 时相关）。默认为 true 。
34         };

11 //************************************************************************************************* 12 //【3D Tiles Point Cloud】 13 //Point Cloud by Prof. Peter Allen, Columbia University Robotics Lab. Scanning by Alejandro Troccoli and Matei Ciocarlie. 14 const viewer = new Cesium.Viewer("cesiumContainer", { 15 terrain: Cesium.Terrain.fromWorldTerrain(, 16 }; 17 viewer.scene.camera.setView({ 18 destination: new Cesium.Cartesian3( 19 4401744.644145314, 20 225051.41078911052, 21 4595420.374784433 22 , 23 orientation: new Cesium.HeadingPitchRoll( 24 5.646733805039757, 25 -0.276607153839886, 26 6.281110875400085 27 , 28 }; 29 try { 30 const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(16421; 31 viewer.scene.primitives.add(tileset; 32 } catch (error { 33 console.log(`Error loading tileset: ${error}`; 34 }

1 //【ArcGIS MapServer】 2 const viewer = new Cesium.Viewer("cesiumContainer", { 3 baseLayer: Cesium.ImageryLayer.fromProviderAsync( 4 //失效的属性 更正：imageProvider ：new Cesium.arcGisMapserverimageProvider（｛url：｝） 5 Cesium.ArcGisMapServerImageryProvider.fromUrl( 6 "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/" 7 8 , 9 };

1     const viewer = new Cesium.Viewer("cesiumContainer";
2          try {
3            viewer.scene.terrainProvider = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl(
4              "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
5            ;
6           //更新：viewer.terrainProvider=await Cesium.TerrainProvider({ url:}
7        } catch (error {
8            window.alert(`Failed to load terrain. ${error}`;
9            

1 ***************************************************************************** 2 //【Blue Marble 蓝色大理石】 3 // Blue Marble Next Generation July, 2004 imagery from NASA 4 const viewer = new Cesium.Viewer("cesiumContainer", { 5 baseLayer: Cesium.ImageryLayer.fromProviderAsync( 6 Cesium.IonImageryProvider.fromAssetId(3845 7 // //失效的属性 8 //更正：imageProvider ：new Cesium.arcGisMapserverimageProvider（｛url：｝） 9 , 10 }; 11 }

1 const viewer = new Cesium.Viewer("cesiumContainer"; 2 const blueBox = viewer.entities.add({ 3 name: "Blue box", 4 position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0, 5 box: { 6 dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0, 7 // 一个 Cartesian3 属性，指定框的长度、宽度和高度。 8 material: Cesium.Color.BLUE, 9 }, 10 }; 11 const redBox = viewer.entities.add({ 12 name: "Red box with black outline", 13 position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0, 14 box: { 15 dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0, 16 material: Cesium.Color.RED.withAlpha(0.5, 17 outline: true, 18 outlineColor: Cesium.Color.BLACK, 19 }, 20 }; 21 const outlineOnly = viewer.entities.add({ 22 name: "Yellow box outline", 23 position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0, 24 box: { 25 dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0, 26 fill: false, 27 // 一个布尔属性，指定是否用提供的材料填充盒子。 28 outline: true, 29 outlineColor: Cesium.Color.YELLOW, 30 }, 31 }; 32 viewer.zoomTo(viewer.entities;

1 //【CZML 3D Tiles】 2 const czml = [ 3 { 4 id: "document", 5 version: "1.0", 6 }, 7 { 8 id: "BatchedColors", 9 name: "BatchedColors", 10 tileset: { 11 uri: 12 "../SampleData/Cesium3DTiles/Batched/BatchedColors/tileset.json", 13 }, 14 }, 15 ]; 16 //let czml=[ 17 //packet1，id一定为document，否则会报错，这里定义的是整个显示场景的信息 18 //{ 19 // "id": "document", 20 // "clock": { 21 // "interval": "2022-01-01T10:10:10+0800/2022-01-05T10:10:10+0800", 22 // "currentTime": "2022-01-02T02:10:10", 23 // "step": "SYSTEM_CLOCK_MULTIPLIER", 24 // "range": "LOOP_STOP", 25 // "multiplier": 5 26 // }, 27 // "version": "1.0" 28 //}, 29 //packet two 30 //{ 31 ////"id":"GroundControlStation" 32 ////"position":{"cartographicDegrees":[-75.5,40.0,0.0]}, 33 ////"point":{ 34 ////"color":{"rgba":[0,0,255,255]}, 35 ////} 36 //}, 37 // packet three 38 //{ 39 //"id":"PredatorUAV", 40 // ... 41 //} 42 //] 43 const viewer = new Cesium.Viewer("cesiumContainer", { 44 shouldAnimate: true, 45 }; 46 const dataSourcePromise = viewer.dataSources.add( 47 //获取要可视化的 DataSource 实例集。 48 Cesium.CzmlDataSource.load(czml 49 ; 50 //let czmldata = new Cesium.CzmlDataSource(id.load(czml; 51 //为使用提供的 CZML 数据加载的新实例创建 Promise。 52 // 53 dataSourcePromise 54 .then(function (dataSource { 55 viewer.flyTo(dataSource.entities.getById("BatchedColors"; 56 //获取具有指定 id 的实体。 57 //flyTo 58 //将相机飞到提供的实体、实体或数据源。如果数据源仍在加载过程中或可视化仍在加载中，则此方法在执行飞行之前等待数据准备好。 59 //偏移量是本地东西北上参考系中的航向/俯仰/范围，以边界球的中心为中心。 60 //航向角和俯仰角在当地东西北上参考系中定义。 61 //航向是从 y 轴到 x 轴增加的角度。俯仰是从 xy 平面的旋转。正俯仰角在平面上方。负俯仰角位于平面下方。范围是到中心的距离。如果范围为零，则将计算范围以使整个边界球体可见。 62 //在 2D 中，必须有自上而下的视图。摄像机将放置在目标上方向下看。 63 //目标上方的高度将是范围。航向将根据偏移量确定。如果无法根据偏移量确定航向，则航向将为北。 64 } 65 .catch(function (error { 66 window.alert(error; 67 }; 68 // //let czmldata = new Cesium.CzmlDataSource(id.load(czml; 69 //id 为 CzmlDataSource对象 id 70 //或者直接写做 let czmldata = Cesium.CzmlDataSource.load(czml; 71 //let temp; 72 //cesium.viewer.dataSources.add(czmldata.then(function (ds { 73 // temp = ds; 74 //}; 75 //或者 cesium.viewer.dataSources.add(czmldata

1 //【CZML Point】 2 const czml1 = [ 3 { 4 id: "document", 5 name: "CZML Point", 6 version: "1.0", 7 }, 8 { 9 id: "point 1", 10 name: "point", 11 position: { 12 cartographicDegrees: [-111.0, 40.0, 0], 13 }, 14 point: { 15 color: { 16 rgba: [255, 255, 255, 255], 17 }, 18 outlineColor: { 19 rgba: [255, 0, 0, 255], 20 }, 21 outlineWidth: 4, 22 pixelSize: 20, 23 }, 24 }, 25 ]; 26 const viewer = new Cesium.Viewer("cesiumContainer"; 27 const dataSourcePromise1 = Cesium.CzmlDataSource.load(czml; 28 // let czmldata = Cesium.CzmlDataSource.load(czml; 29 viewer.dataSources.add(dataSourcePromise; 30 viewer.zoomTo(dataSourcePromise;