因為這幾天在忙一些客觀上無法逃脫的事，沒有大塊時間對中大型案例進行學習，所以對官方案例中的代碼不超過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 = https://www.cnblogs.com/BlackCaat/p/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 = https://www.cnblogs.com/BlackCaat/p/new Cesium.CzmlDataSource(id).load(czml); 69 //id 為 CzmlDataSource物件 id 70 //或者直接寫做 let czmldata = https://www.cnblogs.com/BlackCaat/p/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 = https://www.cnblogs.com/BlackCaat/p/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 =https://www.cnblogs.com/BlackCaat/p/ 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 = https://www.cnblogs.com/BlackCaat/p/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 });
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549818.html
標籤：GIS
上一篇：記錄-css實作交融文字效果