cesium地圖初始化配置說明
阿新 • • 發佈：2021-01-17
技術標籤：CesiumJavascriptjavascript
cesium初始化地球方法
new Cesium.Viewer(container, options)只需要傳入容器id或者Element元素就可以了，options可以為空。就能夠初始化最簡單的地球。
例如下面的程式碼，在引入cesium庫路徑正確的情況下，就能夠創建出一個地球出來。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <title>Hello World!</title> <script src="../Build/Cesium/Cesium.js"></script> <style> @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <div id="cesiumContainer"></div> <script> var viewer = new Cesium.Viewer("cesiumContainer"); </script> </body> </html>
但是cesium初始化方法，還有很多屬性配置，下面就是全部的配置。
var viewer = new Cesium.Viewer('cesiumContainer', { animation: false, // 動畫部件 baseLayerPicker: false, // 基礎圖層部件 fullscreenButton: false, // 全屏按鈕部件 vrButton: false, // vr部件 geocoder: false, // 位置搜尋部件 homeButton: false, // home按鈕 infoBox: false, // 訊息框部件 sceneModePicker: false, // 二三維切換部件 selectionIndicator: false, timeline: false, // 時間軸部件 navigationHelpButton: false, // 導航幫助按鈕 navigationInstructionsInitiallyVisible: false, // 導航說明顯示 scene3DOnly: true, // 當設定為true時，每個幾何圖形例項將僅以3D形式呈現，以節省GPU記憶體。 shouldAnimate: false, // 太陽模擬時鐘時間 // clockViewModel: new Cesium.ClockViewModel(clock), // 當shouldAnimate為ture,執行當前設定的時間區間動畫 // selectedImageryProviderViewModel:{}, // 當前基礎影像圖層，如果設定將使用第一個可用的基礎圖層。僅當“ baseLayerPicker”設定為true時，此值才有效。 // imageryProviderViewModels: [], //可以從BaseLayerPicker中選擇的ProviderViewModels陣列。僅當“ baseLayerPicker”設定為true時，此值才有效。 // selectedTerrainProviderViewModel: new Cesium.ProviderViewModel(options) // 當前基礎地形圖層的檢視模型（如果未提供）將使用第一個可用的基礎圖層。僅當“ baseLayerPicker”設定為true時，此值才有效。 // terrainProviderViewModels: [], // 可以從BaseLayerPicker中選擇的ProviderViewModels陣列。僅當“ baseLayerPicker”設定為true時，此值才有效。 // imageryProvider: // 載入不同的地圖服務。僅當“ baseLayerPicker”設定為false時，此值才有效。 // terrainProvider: // 載入地形服務 // skyBox: false, // 配置天空盒子或不顯示天空盒子 // skyAtmosphere: false, // 配置大氣或不顯示大氣 // fullscreenElement: '', // 配置全屏按鈕，傳入id或者dom useDefaultRenderLoop: true, // 控制是否繼續渲染 // targetFrameRate:24, // 控制渲染幀數 showRenderLoopErrors: true, // 報錯是否彈出錯誤 useBrowserRecommendedResolution: true, // 設定為false使用window.devicePixelRatio屬性 automaticallyTrackDataSourceClocks: false, // 設定成true，使用公共clock物件，設定false，所有功能使用獨立clock物件 contextOptions: {}, // 建立場景時，配置webgl sceneMode: Cesium.SceneMode.SCENE3D, // 初始化場景為3D、2.5D、2D // mapProjection:new GeographicProjection(), // 使用2D 或者 Columbus View modes 設定地圖投影方式 //globe: false, // 配置新的地球或隱藏地球 orderIndependentTranslucency: true, // 如果為true且配置支援，則使用順序無關的透明性。 creditContainer: document.getElementById('units'), // 部件容器 // creditViewport: '', // 提示顯示容器 // dataSources: new Cesium.DataSourceCollection(), // 小部件資料來源設定 terrainExaggeration: 1.0, // 誇大地形 shadows: true, // 是否開啟陰影 terrainShadows: true, // 是否開啟地形陰影 mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL, // 設定2D地圖水平旋轉 projectionPicker: false, // 設定為true, ProjectionPicker部件會被建立, ProjectionPicker：設定地球最佳視角 // 如果為真，渲染幀只會在需要時發生，這是由場景中的變化決定的。啟用可以減少你的應用程式的CPU/GPU使用，並且在移動裝置上使用更少的電池，但是需要使用Scene#requestRender在這種模式下顯式地渲染一個新幀。在許多情況下，在API的其他部分更改場景後，這是必要的。請參閱使用顯式呈現提高效能。 // 不是特別明白，應該是提高渲染效能的 requestRenderMode: true, // 如果requestRenderMode為true，這個值定義了在請求渲染之前允許的模擬時間的最大變化。請參閱使用顯式呈現提高效能。 maximumRenderTimeChange: 0.0 }); let clock = new Cesium.Clock({ startTime: Cesium.JulianDate.fromIso8601("2013-12-25"), // 開始時間 currentTime: Cesium.JulianDate.fromIso8601("2013-12-25"), // 當前時間 stopTime: Cesium.JulianDate.fromIso8601("2013-12-26"), // 結束時間 multiplier: 1.0, // 時間執行倍數，負數向前進 clockRange: Cesium.ClockRange.LOOP_STOP, // 到達時間開始或結束後的操作，是否迴圈 clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER, // 設定時鐘的頻率是系統時間，還是幀 });