Cesium 案例（九）示例中小程序集合（1）

因为这几天在忙一些客观上无法逃脱的事，没有大块时间对中大型案例进行学习，所以对官方案例中的代码不超过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                       });