Cesium 案例（十）示例中小程序集合（2）

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

21.3D Tiles Photogrammetry

 //【3D Tiles Photogrammetry】
                    const viewer = new Cesium.Viewer("cesiumContainer", {
                terrain: Cesium.Terrain.fromWorldTerrain(),
              });
              try {
                const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(40866);
                viewer.scene.primitives.add(tileset);
                viewer.zoomTo(tileset);
              } catch (error) {
                console.log(`Error loading tileset: ${error}`);
              }

 22.Sphere and Ellipsoids

     const viewer = new Cesium.Viewer("cesiumContainer");
      const blueEllipsoid = viewer.entities.add({
        name: "001",
        position: new Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
        ellipsoid: {
          radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
          material: Cesium.Color.BLUE,
        },
      });
      const redSphere = viewer.entities.add({
        name: "002",
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        ellipsoid: {
          radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
          material: Cesium.Color.RED.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK,
        },
      });

      const ontlineOnly = viewer.entities.add({
        name: "003",
        position: Cesium.Cartesian3.fromDegrees(-100, 40, 300000.0),
        ellipsoid: {
          radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
          fill: false,
          outline: true,
          outlineColor: Cesium.Color.YELLOW,
          slicePartitions: 24,
          //堆栈数的属性
          stackPartitions: 36,
          //径向切片的数量
        },
      });
      viewer.zoomTo(viewer.entities);