草庐IT

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

BlackCaat 2023-04-24 原文

因为这几天在忙一些客观上无法逃脱的事,没有大块时间对中大型案例进行学习,所以对官方案例中的代码不超过40行的程序进行了学习。我把他们放在一到两个随笔中。

注:【所有案例中最前面务必加上】

 1 Cesium.Ion.defaultAccessToken =your Token;

集合一

1.3D Tiles Inspector

     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}`);
            }

 

 

2.3DTiles Interior

 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         });

 

3.3D Tiles Point Cloud

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                    }

 

4.ArcGIS MapServer

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              });

 

 

5.ArcGIS  Tiled Elevation Terrain

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            

 

 

6.Blue Marble  蓝色大理石

 

 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                     }

 

7.Box

 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);

 

8.CZML 3D Tiles

 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)

 

9.CZML Point

 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);

 

10.CZML

 1                                             //【CZML】
 2                 const viewer = new Cesium.Viewer("cesiumContainer", {
 3             shouldAnimate: true,
 4            });
 5              Sandcastle.addDefaultToolbarButton("Satellites", function () {
 6                viewer.dataSources.add(
 7                  Cesium.CzmlDataSource.load("../SampleData/simple.czml")
 8                );
 9              viewer.camera.flyHome(0);
10              //将相机飞到主视图。使用 Camera#.DEFAULT_VIEW_RECTANGLE 设置 3D 场景的默认视图。
11              //2D 和哥伦布视图的主视图显示整个地图。
12              //duration     Number     可选 以秒为单位的飞行持续时间。
13              //如果省略,Cesium 会尝试根据飞行的距离计算理想的持续时间。
14            });
15            Sandcastle.addToolbarButton("Vehicle", function () {
16              viewer.dataSources.add(
17                Cesium.CzmlDataSource.load("../SampleData/Vehicle.czml")
18              );
19              viewer.scene.camera.setView({
20                destination: Cesium.Cartesian3.fromDegrees(-116.52, 35.02, 95000),
21                //目的地
22                orientation: {
23                  heading: 6,
24                },
25                //方向
26              });
27            });
28            Sandcastle.reset = function () {
29              viewer.dataSources.removeAll();
30             //从此集合中删除所有数据源。
31           };

 

11.OSM

 1   const viewer = new Cesium.Viewer("cesiumContainer", {
 2                  terrain: Cesium.Terrain.fromWorldTerrain(),
 3                  //terrainProvider:Cesium.createWorldTerrain();
 4                });
 5                const osmBuildingsTileset = await Cesium.createOsmBuildingsAsync();
 6                //为 Cesium OSM Buildings 瓦片集创建一个 Cesium3DTileset 实例
 7                //Cesium.createOsmBuildings()
 8                viewer.scene.primitives.add(osmBuildingsTileset);
 9                //获取原语的集合
10                //将原语添加到集合中。
11                viewer.scene.camera.flyTo({
12                  destination: Cesium.Cartesian3.fromDegrees(-74.019, 40.6912, 750),
13                  orientation: {
14                    heading: Cesium.Math.toRadians(20),
15                    pitch: Cesium.Math.toRadians(-20),
16                  },
17                });

 

12.CLock

 1   //【CLock】
 2                // Create a clock that loops on Christmas day 2013 and runs in 4000x real time.
 3          const clock = new Cesium.Clock({
 4            startTime: Cesium.JulianDate.fromIso8601("2013-12-25"),
 5              currentTime: Cesium.JulianDate.fromIso8601("2013-12-25"),
 6              stopTime: Cesium.JulianDate.fromIso8601("2013-12-26"),
 7                   clockRange: Cesium.ClockRange.LOOP_STOP, // loop when we hit the end time
 8                 clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
 9                 //确定对 Clock#tick 的调用是依赖于帧还是依赖于系统时钟。
10                 multiplier: 4000, // how much time to advance each tick
11                 // 确定调用 Clock#tick 时提前多少时间,负值允许向后推进
12                 shouldAnimate: true, // Animation on by default
13                 //指示 Clock#tick 是否应该尝试提前时间。
14                 //只有当 Clock#canAnimate 和 Clock#shouldAnimate 都为真时,时钟才会滴答作响。
15               });
16               const viewer = new Cesium.Viewer("cesiumContainer", {
17                 clockViewModel: new Cesium.ClockViewModel(clock),
18               });
19               viewer.scene.globe.enableLighting = true;
20               //启用使用场景光源照亮地球。
21               Sandcastle.addToolbarButton("Reset Current Time", function () {
22                 const resetTime = viewer.clockViewModel.startTime;
23                 viewer.clockViewModel.currentTime = resetTime;
24                 viewer.timeline.updateFromClock();
25                 //废弃了,但没找到替代函数,可能不需要写?
26               });
27               Sandcastle.addToolbarButton("Slow Down Clock", function () {
28                 viewer.clockViewModel.multiplier /= 2;
29               });
30               Sandcastle.addToolbarButton("Speed Up Clock", function () {
31                 viewer.clockViewModel.multiplier *= 2;
32             });

 

13.Cylinders and Cones

 1 //custom 定制的
 2                 //
 3                 //*************************************************************************************************
 4                       //【Cylinders and Cones】
 5                 const viewer = new Cesium.Viewer("cesiumContainer");
 6               const greenCylinder = viewer.entities.add({
 7                 name: "Gren cylinder with black outline",
 8                position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
 9                cylinder: {
10                  length: 400000.0,
11                  topRadius: 200000.0,
12                  bottomRadius: 200000.0,
13                  //底部半径
14                  material: Cesium.Color.GREEN.withAlpha(0.5),
15                  outline: true,
16                   outlineColor: Cesium.Color.DARK_GREEN,                                                },
17              });
18              const redCone = viewer.entities.add({
19                name: "Red cone",
20                //圆锥
21                position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
22                cylinder: {
23                  //圆柱
24                  length: 400000.0,
25                  topRadius: 0.0,
26                  bottomRadius: 200000.0,
27                   material: Cesium.Color.RED,                                                },
28              });
29             viewer.zoomTo(viewer.entities);

 

14.FXAA

 1       const viewer = new Cesium.Viewer("cesiumContainer", {
 2                 terrain: Cesium.Terrain.fromWorldTerrain(),
 3                 //terrainProvider:Cesium.createWorldTerrain()
 4             });
 5               viewer.scene.camera.setView({
 6                 destination: new Cesium.Cartesian3(
 7                   1331419.302230775,
 8                   -4656681.5022043325,
 9                   4136232.6465900405
10                 ),
11                 orientation: new Cesium.HeadingPitchRoll(
12                   6.032455545102689,
13                   -0.056832496140112765,
14                   6.282360923090216
15                 ),
16                 endTransform: Cesium.Matrix4.IDENTITY,
17                 //表示相机的参考框架。
18             });
19               viewer.scene.postProcessStages.fxaa.enabled = true;
20               //scene.postProcessStages
21               //应用于最终渲染的后处理效果。
22               //scene.postProcessStages.fxaa
23               //快速近似抗锯齿的后处理阶段。
24               //启用后,此阶段将在所有其他阶段之后执行。
25               //scene.postProcessStages.fxaa.enabled
26 
27                Sandcastle.addToggleButton("FXAA", true, function (checked) {
28                  iewer.scene.postProcessStages.fxaa.enabled = checked;
29              });
30              try {
31                  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(75343);
32                viewer.scene.primitives.add(tileset);
33            } catch (error) {
34                onsole.log(`Error loading tileset: ${error}`);
35              }

 

15.GeoJSON simplestyle

 1    //【GeoJSON simplestyle】
 2              //Load a GeoJSON file containing simplestyle information
 3              //To learn more about simplestyle, see https://github.com/mapbox/simplestyle-spec
 4              //In this particular example, the name of each entity is set to its mak icon identifier.
 5                //Clicking on each billboard will show it's identifier in the InfoBox.
 6                const viewer = new Cesium.Viewer("cesiumContainer", {
 7                  sceneMode: Cesium.SceneMode.SCENE2D,
 8                timeline: false,
 9                anmation: false,
10                });
11              const dataSource = Cesium.GeoJsonDataSource.load(
12              "../SampleData/simplestyles.geojson"
13            );
14              viewer.dataSources.add(dataSource);
15                viewer.zoomTo(dataSource);

 

16.Google Earth ENterprise

 1  //【Google Earth ENterprise 】
 2              const viewer = new Cesium.Viewer("cesiumContainer", {
 3                  baseLayerPicker: false,
 4                                                     });
 5 
 6              try {
 7                  const geeMetadata = await Cesium.GoogleEarthEnterpriseMetadata.fromUrl(
 8                    new Cesium.Resource({
 9                      url: "http://www.earthenterprise.org/3d",
10                      proxy: new Cesium.DefaultProxy("/proxy/"),
11                    })
12                  );
13                  // var geeMetadata = new Cesium.GoogleEarthEnterpriseMetadata(
14                    //"http://www.earthenterprise.org/3d"
15                   // );
16                //var googleEarthProvider = new Cesium.GoogleEarthEnterpriseImageryProvider({
17                    //  metadata: geeMetadata,
18                   /// });
19                                                     //imageryLayers.addImageryProvider(googleEarthProvider);
20 
21 
22              viewer.scene.terrainProvider = Cesium.GoogleEarthEnterpriseTerrainProvider.fromMetadata(
23                    geeMetadata
24                                                       );
25 
26                const layers = viewer.scene.imageryLayers;
27                  const blackMarble = new Cesium.ImageryLayer(
28                    new Cesium.GoogleEarthEnterpriseImageryProvider({
29                      metadata: geeMetadata,
30                    })
31                  );
32                  layers.add(blackMarble);
33                } catch (error) {
34                  console.log(`Failed to create Google Earth providers from metadata. Confirm GEE service is correctly configured.
35                   ${error}`);
36                 }
37         // Start off looking at San Francisco.
38                 viewer.camera.setView({
39                   destination: Cesium.Rectangle.fromDegrees(-123.0, 36.0, -121.7, 39.0),
40                 });

 

17.HTML Overlays(覆盖)

 1  //【HTML Overlays(覆盖) 】
 2                 const viewer = new Cesium.Viewer("cesiumContainer");
 3         // To geographically place an HTML element on top of the Cesium canvas, we use
 4                 // scene.cartesianToCanvasCoordinates to map a world position to canvas x and y values.
 5                 // This example places and img element, but any element will work.
 6         const htmlOverlay = document.getElementById("htmlOverlay");
 7                 const scratch = new Cesium.Cartesian2();
 8                 viewer.scene.preRender.addEventListener(function () {
 9                   //获取将在场景更新后和渲染场景之前引发的事件。
10                   //事件的订阅者接收场景实例作为第一个参数和当前时间作为第二个参数。
11                   const position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
12                   const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
13                     //将笛卡尔坐标中的位置转换为画布坐标。
14                     //这通常用于将 HTML 元素放置在与场景中的对象相同的屏幕位置。
15                     position,
16                     scratch
17           //          position     Cartesian3     笛卡尔坐标中的位置。
18          //          result     Cartesian2     可选 一个可选对象,用于返回转换为画布坐标的输入位置。
19                   );
20                  if (Cesium.defined(canvasPosition)) {
21                     htmlOverlay.style.top = `${canvasPosition.y}px`;
22                     htmlOverlay.style.left = `${canvasPosition.x}px`;
23                  }
24                 });

 

18.Imagery Layers

 1     //【Imagery Layers】
 2                 const viewer = new Cesium.Viewer("cesiumContainer", {
 3                                           baseLayer: Cesium.ImageryLayer.fromWorldImagery({
 4                                             //imageryProvider :new Cesium.ArcGisMapServerImageryProvider({
 5                                       ////url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
 6                                   //});
 7                                     style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
 8                                             //AERIAL     Number     航空影像。
 9                                      //AERIAL_WITH_LABELS     Number     带有道路叠加层的航拍图像。
10                                             //ROAD     Number     没有额外图像的道路。
11 
12                                }),
13                                    baseLayerPicker: false,//视图层小部件
14                                       });
15                                  const layers = viewer.scene.imageryLayers;
16 
17                           const blackMarble = Cesium.ImageryLayer.fromProviderAsync(
18                                         Cesium.IonImageryProvider.fromAssetId(3812)
19                                         );//feiqi的api属性
20                               //let imageryProvider= new Cesium.IonImageryProvider({
21                           //  assetId: 3812,
22                           //  accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMTg2Mzk0My02NWJmLTQ1ODgtOWRiMy0wODM1ZTkwNGM1NTYiLCJpZCI6MjM0NzYsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1ODM0NjEyMDN9.qXnJKCaIHS7JkIPRySJmmbdHvyj1ihQ2CI3itKy9MvY'
23                             //})//————————————————
24 
25                                      blackMarble.alpha = 0.5;
26                             blackMarble.brightness = 2.0;
27                             layers.add(blackMarble);
28 
29                   const cesiumLogo = Cesium.ImageryLayer.fromProviderAsync(
30                                           Cesium.SingleTileImageryProvider.fromUrl(
31                                 "../images/Cesium_Logo_overlay.png",
32                                 {
33                                   rectangle: Cesium.Rectangle.fromDegrees(
34                                               -75.0,
35                                   28.0,
36                                   -67.0,
37                           29.75
38                                               ),
39                               }
40                             )
41                         );
42                               layers.add(cesiumLogo);
43                             //如果需要自己提供地图图层数据,
44                             //就需要自己实现一个imageryProvider并赋予viewer的imageryProvider属性。
45                     //

 

19.Projection

 1  //【Projection】
 2                                    // Click the projection picker to switch between orthographic and perspective projections.
 3                   const viewer = new Cesium.Viewer("cesiumContainer", {
 4                     projectionPicker: true,
 5                     //如果设置为 true,将创建 ProjectionPicker 小部件。
 6                   });
 7 
 8             // start with orthographic projection
 9                   viewer.projectionPicker.viewModelwitchToOrthographic();
10                        //获取切换到正交投影的命令。
11                     const position = Cesium.Cartesian3.romDegrees(
12                        -123.0744619,
13                           44.0503706,
14                           0.0
15                         );
16                   const hpr = new Cesium.HeadingPitchRoll(
17                      //表示为航向、俯仰和横滚的旋转。             //航向是围绕负 z 轴的旋转。俯仰是围绕负 y 轴的旋转。滚动是围绕正 x 轴的旋转。
18                      Cesium.Math.toRadians(135),
19                      //将度数转换为弧度。
20                      0.0,
21 
22                    );
23                    const orientation = Cesium.Transforms.headingPitchRollQuaternion(
24                      position,
25                      hpr
26                   );
27                    //从参考坐标系计算四元数,坐标轴从以提供的原点为中心的航向-俯仰-滚动角计算。             //航向是从当地的北向旋转,正角向东增加。俯仰是当地东西向平面的旋转。
28                    //正俯仰角在平面上方。负俯仰角位于平面下方。滚动是围绕局部东轴应用的第一个旋转。
29                    const entity = viewer.entities.add({
30                      position: position,
31                orientation: orientation,
32                model: {          uri: "../SampleData/models/CesMilkTruck/CesiumMilkTruck.glb",
33                  minimumPixelSize: 128,             maximumScale: 20000,
34                },
35              });
36              viewer.trackedEntity = entity;
37                   //获取或设置相机当前正在跟踪的实体实例。

 

20.Potatable 2D Map

 1    //*************************************************************************************************
 2                //【Potatable 2D Map】
 3                   const viewer = new Cesium.Viewer("cesiumContainer", {
 4               sceneMode: Cesium.SceneMode.SCENE2D,
 5               //MORPHING     Number     在模式之间变形,例如,3D 到 2D。
 6                 //COLUMBUS_VIEW     Number     哥伦布视图模式。一个 2.5 透视图,其中地图平放,其上方绘制了非零高度的对象。
 7                 //SCENE2D     Number     二维模式。使用正交投影自上而下查看地图。
 8                 //SCENE3D     Number     3D模式。地球的传统 3D 透视图。     mapMode2D: Cesium.MapMode2D.ROTATE,
 9               //确定 2D 地图是可旋转的还是可以在水平方向上无限滚动。
10               //ROTATE     Number     2D 地图可以绕 z 轴旋转。
11              //INFINITE_SCROLL     Number     二维地图可以在水平方向无限滚动。
12              });
13              viewer.scene.camera.setView({
14                  destination: Cesium.Cartesian3.fromDegrees(-73.0, 42.0, 50000000.0),
15                  orientation: {
16                    heading: Cesium.Math.toRadians(-45.0),
17                  },
18                       });

 

 

有关Cesium 案例(九)示例中小程序集合(1)的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep,它会中断应用程序。否则,计算机将持续运行数周,直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗?欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数,使应用程序能够通知系统它正在使用中,从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时,rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  3. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后,Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用,我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  4. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  5. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  6. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  7. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  8. ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2

    如何检查Ruby文件是否是通过“require”或“load”导入的,而不是简单地从命令行执行的?例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上,我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby​​文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否

  9. ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2

    是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录?这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢,抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以,在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码,您的模块将在

  10. 程序员如何提高代码能力? - 2

    前言作为一名程序员,自己的本质工作就是做程序开发,那么程序开发的时候最直接的体现就是代码,检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知,程序开发的水平提升是一个循序渐进的过程,每一位程序员都是从“菜鸟”变成“大神”的,所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力,尤其是新晋程序员的代码能力有很大的提升空间的时候,需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点,只要把握住这些方面,就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目,如有机会可以亲自参与开源

随机推荐