(相關資料圖)
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 });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 tick11 // 確定調用 Clock#tick 時提前多少時間，負值允許向后推進12 shouldAnimate: true, // Animation on by default13 //指示 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 });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);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.646590040510 ),11 orientation: new Cesium.HeadingPitchRoll(12 6.032455545102689,13 -0.056832496140112765,14 6.28236092309021615 ),16 endTransform: Cesium.Matrix4.IDENTITY,17 //表示相機的參考框架。18 });19 viewer.scene.postProcessStages.fxaa.enabled = true;20 //scene.postProcessStages21 //應用于最終渲染的后處理效果。22 //scene.postProcessStages.fxaa23 //快速近似抗鋸齒的后處理階段。24 //啟用后，此階段將在所有其他階段之后執行。25 //scene.postProcessStages.fxaa.enabled26 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 }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);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 geeMetadata24 );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 });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 scratch17 // 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 });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.7538 ),39 }40 )41 );42 layers.add(cesiumLogo);43 //如果需要自己提供地圖圖層數據，44 //就需要自己實現一個imageryProvider并賦予viewer的imageryProvider屬性。45 //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.015 );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 hpr26 );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 //獲取或設置相機當前正在跟蹤的實體實例。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 });1 //【3D Tiles Photogrammetry】 2 const viewer = new Cesium.Viewer("cesiumContainer", { 3 terrain: Cesium.Terrain.fromWorldTerrain(), 4 }); 5 try { 6 const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(40866); 7 viewer.scene.primitives.add(tileset); 8 viewer.zoomTo(tileset); 9 } catch (error) {10 console.log(`Error loading tileset: ${error}`);11 }1 const viewer = new Cesium.Viewer("cesiumContainer"); 2 const blueEllipsoid = viewer.entities.add({ 3 name: "001", 4 position: new Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0), 5 ellipsoid: { 6 radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0), 7 material: Cesium.Color.BLUE, 8 }, 9 });10 const redSphere = viewer.entities.add({11 name: "002",12 position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),13 ellipsoid: {14 radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),15 material: Cesium.Color.RED.withAlpha(0.5),16 outline: true,17 outlineColor: Cesium.Color.BLACK,18 },19 });20 21 const ontlineOnly = viewer.entities.add({22 name: "003",23 position: Cesium.Cartesian3.fromDegrees(-100, 40, 300000.0),24 ellipsoid: {25 radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),26 fill: false,27 outline: true,28 outlineColor: Cesium.Color.YELLOW,29 slicePartitions: 24,30 //堆棧數的屬性31 stackPartitions: 36,32 //徑向切片的數量33 },34 });35 viewer.zoomTo(viewer.entities); 標簽：
