Viewer是Cesium中用于顯示3D場景的組件。它提供了創(chuàng)建和控制3D場景所需的所有基本功能，包括加載3D模型、添加圖像覆蓋物、設置相機位置和方向、處理用戶輸入等。
在創(chuàng)建Viewer時，可以指定要使用的HTML元素（例如canvas），該元素將用于呈現(xiàn)3D場景。一旦創(chuàng)建了Viewer對象，就可以通過調(diào)用其方法來添加實體、圖像覆蓋物和其他元素，并對相機進行操作。
構造函數(shù)
new Cesium.Viewer(container, options)：是用來創(chuàng)建一個新的 Cesium 視圖器（Viewer）實例的構造函數(shù)。
它包含兩個參數(shù)：文章來源：http://www.zghlxwxcb.cn/news/detail-478562.html
-
container：必需，表示視圖器容器元素的ID字符串或HTML元素。 -
options：可選，是一個包含所有初始選項的JavaScript對象，可以控制如何呈現(xiàn)三維場景、哪些數(shù)據(jù)源可用以及視圖控制器的行為等方面。
下面代碼在名為“cesiumContainer”的HTML元素中創(chuàng)建一個新的Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer',{
animation:false,//動畫小部件
baseLayerPicker:false,//地圖圖層組件
fullscreenButton:false,//全屏組件
geocoder:false,//地理編碼搜索組件
homeButton:false,//首頁組件
infoBox:false,//信息框
sceneModePicker:false,//場景模式
selectionIndicator:false,//選取指示器組件
timeline:false,//時間軸
navigationHelpButton:false,//幫助按鈕
navigationInstructionsInitiallyVisible:false,
})
成員變量：
-
animation: Animation實例，表示動畫控制器，可以用于控制動畫的播放和暫停。 -
baseLayerPicker: BaseLayerPicker實例，用于選擇底圖圖層。 -
bottomContainer: HTMLElement實例，表示Viewer中底部的HTML容器元素。 -
camera: Camera實例，表示當前的相機，可以通過該實例控制相機的位置、姿態(tài)等屬性。 -
canvas: HTMLCanvasElement實例，表示Viewer中渲染3D場景的Canvas元素。 -
cesiumWidget: CesiumWidget實例，Viewer的基礎構建塊。 -
clock: Clock實例，表示時鐘，可以用于控制時間相關的可視化效果。 -
clockViewModel: ClockViewModel實例，表示時鐘視圖模型，用于控制時間相關的可視化效果。 -
container: HTMLElement實例，表示Viewer的HTML容器元素。 -
creditContainer: HTMLElement實例，表示Viewer中版權信息的HTML容器元素。 -
dataSourceDisplay: DataSourceDisplay實例，用于顯示數(shù)據(jù)源中的實體。 -
entities: EntityCollection實例，用于管理所有的實體對象。 -
fullscreenButton: FullscreenButton實例，用于全屏顯示Viewer的內(nèi)容。 -
geocoder: Geocoder實例，用于地名搜索和定位。 -
homeButton: HomeButton實例，用于將相機位置和姿態(tài)重置為默認值。 -
imageryLayers: ImageryLayerCollection實例，表示圖像圖層集合，可以添加或刪除不同的圖層。 -
infoBox: InfoBox實例，用于顯示實體的詳細信息和屬性。 -
navigationHelpButton: NavigationHelpButton實例，用于顯示Viewer中的導航幫助信息。 -
postProcessStages: PostProcessStageCollection實例，表示后處理階段的集合，可以添加或刪除不同的后處理效果。 -
projectionPicker: ProjectionPicker實例，用于選擇不同的地球投影方式。 -
scene: Scene實例，表示三維場景，包含了所有的3D對象和圖層以及相機參數(shù)等信息。 -
screenSpaceEventHandler: ScreenSpaceEventHandler實例，用于處理鼠標和觸摸事件。 -
selectedEntity: Entity實例，表示當前選中的實體。 -
selectionIndicator: SelectionIndicator實例，用于顯示當前選中實體的指示器。 -
shadowMap: ShadowMap實例，用于生成和渲染陰影圖。 -
skyBox: SkyBox實例，用于設置天空盒。 -
skyBoxEllipsoid: Cartesian3實例，表示天空盒所在的橢球體。 -
sun: Sun實例，用于控制太陽的位置和光照效果。 -
targetFrameRate: Number類型，表示目標幀率。 -
terrainProvider: TerrainProvider實例，表示當前使用的地形提供程序。 -
terrainShadows: ShadowMode類型，表示地形產(chǎn)生陰影的模式。 -
useDefaultRenderLoop: Boolean類型，表示是否使用默認的渲染循環(huán)。 -
useBrowserRecommendedResolution: Boolean類型，表示是否使用瀏覽器推薦的分辨率。
常用方法：
-
destroy(): 銷毀Viewer實例。 -
flyTo(target, options): 使相機飛行到指定的目標位置，并設置相應的動畫效果和參數(shù)。 -
forceResize(): 強制刷新Viewer的大小和位置。 -
isDestroyed(): 判斷Viewer是否已經(jīng)銷毀。 -
render(): Promise: 渲染3D場景并返回Promise對象，用于異步等待渲染結果。 -
resize(): undefined: 調(diào)整Viewer的大小和位置。 -
zoomTo(target, offset): 用于將視圖縮放到指定的范圍或尺寸的函數(shù),target:定位到的實體、實體集合、數(shù)據(jù)源等。 offset：偏移量。
Viewer構造函數(shù)的初始化選項
-
animation: 是否顯示動畫控制面板，默認為true。當啟用時，動畫小部件會在場景下方展示當前時間和時間軸，可以通過鼠標交互來改變時間。 -
baseLayerPicker: 是否顯示底圖選擇器，默認為true。底圖選擇器小部件可以讓用戶在不同的影像圖層之間進行選擇切換。 -
fullscreenButton: 是否顯示全屏按鈕，默認為true。全屏按鈕允許用戶將Viewer切換到全屏模式。 -
vrButton: 是否顯示VR按鈕，默認為false。（需要支持WebVR才能生效）。當用戶在支持WebVR的設備中使用時，可以啟用VR模式以獲得更加沉浸式的體驗。 - geocoder：控制是否顯示地理編碼器小部件，默認為true。地理編碼器小部件允許用戶輸入地址或地名來定位場景視角。
-
homeButton: 是否顯示回到初始位置按鈕，默認為true。Home按鈕允許用戶重置場景視角到初始狀態(tài)。 -
infoBox: 是否顯示信息框，默認為true。信息框小部件可以展示實體、位置、高程等詳細信息。 -
sceneModePicker: 是否顯示場景模式選擇器，默認為true。場景模式選擇器小部件可以讓用戶在三種場景模式之間進行切換：2D、3D、哥倫布視圖。 -
selectionIndicator: 是否顯示選擇指示器，默認為true。選擇指示器可用于顯示場景中所選對象的輪廓或邊框。 -
timeline: 是否顯示時間軸控制面板，默認為true。時間軸小部件可以讓用戶拖動時間來改變場景的顯示。 -
navigationHelpButton: 是否顯示導航幫助按鈕，默認為true。導航幫助按鈕允許用戶查看控制場景的快捷鍵和鼠標操作。 -
navigationInstructionsInitiallyVisible: 導航幫助是否一開始就可見，默認為true。如果設置為false，則需要用戶手動點擊導航幫助按鈕才能查看導航說明。 -
scene3DOnly: 是否僅允許3D場景模式，默認為false。 - shouldAnimate：是否應該在每一幀之間循環(huán)播放場景動畫。如果設置為true，則會循環(huán)播放動畫，否則將保持靜態(tài)不動。通過設置此屬性，可以控制場景動畫是否自動播放。
-
clockViewModel: 時鐘視圖模型，用于配置時間軸和動畫控制面板。 -
selectedImageryProviderViewModel: 默認選中的底圖提供者視圖模型。 -
imageryProviderViewModels: 底圖提供者視圖模型數(shù)組。 -
selectedTerrainProviderViewModel: 默認選中的地形提供者視圖模型。 -
terrainProviderViewModels: 地形提供者視圖模型數(shù)組。 -
imageryProvider: 底圖提供者，可以是Cesium.UrlTemplateImageryProvider、Cesium.WebMapTileServiceImageryProvider等類型。 -
baseLayer:指定在場景中使用的初始圖層。默認情況下，這個屬性設置為ImageryLayer集合中的第一項，通常是顯示衛(wèi)星影像的底圖?？梢詫⒆约旱腎mageryProvider傳遞給baseLayer屬性，從而更改初始圖層。此外，如果需要同時顯示多個圖層，則可以創(chuàng)建一個ImageryLayerCollection，并將多個圖層添加到其中，然后將其中一個圖層設置為基礎圖層。 -
terrainProvider: 地形提供者，可以是Cesium.CesiumTerrainProvider、Cesium.GoogleEarthEnterpriseTerrainProvider等類型。 -
terrain:指定一個地形提供者（TerrainProvider），用于加載和顯示場景中的地形數(shù)據(jù)。默認情況下，Cesium會加載一些全球高程數(shù)據(jù)，并使用這些數(shù)據(jù)來生成場景中的地形。如果想要更改或增強地形數(shù)據(jù)，則可以將自己的地形提供者傳遞給terrain屬性。例如，可以使用ArcGIS Server、Mapbox或OpenTopography等服務，來獲取更準確或更詳細的地形數(shù)據(jù)。需要注意的是，使用地形數(shù)據(jù)會增加場景的復雜性和資源消耗，因此需要謹慎使用。 -
skyBox: 天空盒樣式，可以是Cesium.SkyBox或者Cesium.Color類型。 -
skyAtmosphere: 大氣層設置，可用于控制大氣層渲染效果。 -
fullscreenElement: 全屏元素，默認為undefined，表示使用全局document.documentElement進行全屏。 -
useDefaultRenderLoop: Boolean類型，表示是否使用默認的渲染循環(huán)。 -
targetFrameRate: Number類型，表示目標幀率。 -
showRenderLoopErrors: 是否顯示渲染循環(huán)錯誤信息，默認為true。 -
useBrowserRecommendedResolution: Boolean類型，表示是否使用瀏覽器推薦的分辨率。 -
automaticallyTrackDataSourceClocks: 是否自動跟蹤數(shù)據(jù)源時鐘，當設置為true時，數(shù)據(jù)源始終與場景時鐘同步，如果數(shù)據(jù)源沒有時鐘，則不會跟蹤。默認為true。 -
contextOptions: WebGL上下文參數(shù)，可以設置antialias、depth、stencil、alpha、premultipliedAlpha等屬性。 -
sceneMode: 場景模式，有Cesium.SceneMode.SCENE3D、Cesium.SceneMode.COLUMBUS_VIEW、Cesium.SceneMode.SCENE2D三種，默認為SCENE3D。 -
mapProjection: 地圖投影方式，可以是Cesium.WebMercatorProjection或者Cesium.GeographicProjection類型，默認為WebMercatorProjection。 -
globe: 地球?qū)ο?，可以用于控制地球的旋轉、縮放和其他屬性。 -
orderIndependentTranslucency: 是否啟用獨立透明度排序，默認為true。 -
creditContainer: 顯示數(shù)據(jù)源的HTML元素，默認為undefined，表示使用內(nèi)置元素。 -
creditViewport: 顯示數(shù)據(jù)源的矩形區(qū)域，默認為undefined，表示使用整個視窗。 -
dataSources: 數(shù)據(jù)源數(shù)組，包括所有可視化實體和圖層。 -
shadows: 是否啟用陰影渲染，默認為false。 -
terrainShadows: ShadowMode類型，表示地形產(chǎn)生陰影的模式。 -
mapMode2D: 在2D場景模式下是否顯示地圖，默認為true。 -
projectionPicker: 是否顯示投影方式選擇器，默認為true。 -
blurActiveElementOnCanvasFocus:控制當用戶點擊或懸停在Cesium Viewer的畫布上時，是否將焦點從當前DOM元素中移出。如果設置為true，則會自動將焦點從當前的DOM元素中移開，以便Cesium Viewer可以接收鍵盤事件和鼠標事件。
這個屬性對于在Web應用程序中使用Cesium Viewer時很有用，因為用戶可能需要與其他DOM元素進行交互，例如輸入文本或單擊按鈕。如果不把焦點從當前元素移開，用戶將不能使用鍵盤或鼠標來與Cesium Viewer進行交互。
需要注意的是，默認情況下，此屬性被設置為true，因此當用戶點擊或懸停在Cesium Viewer的畫布上時，焦點將會自動從當前的DOM元素中移開。如果您想要保留焦點，請將該屬性設置為false。 -
requestRenderMode: 請求渲染模式，有RequestRenderMode.AUTOMATIC、RequestRenderMode.MANUAL兩種，默認為AUTOMATIC。 -
maximumRenderTimeChange: 最大幀率限制，表示相鄰兩幀之間最多允許刷新的時間差（毫秒），如果超過該值則自動降低幀率。默認為0，表示不限制幀率。 -
depthPlaneEllipsoidOffset:可以指定深度測試平面相對于橢球體表面的偏移量。這個屬性通常用于解決多個三維模型重疊時出現(xiàn)的Z-fighting問題，即兩個或多個物體處于同一深度位置，導致圖像閃爍或不清晰。
通過將depthPlaneEllipsoidOffset設置為一個Cartesian3類型的向量，可以將深度測試平面上移或下移一定距離。需要注意的是，改變深度測試平面的偏移量可能會影響場景中的渲染效果和性能。因此，應該謹慎使用這個屬性，并進行必要的測試和優(yōu)化。
另外，需要注意的是，在Viewer對象中設置depthPlaneEllipsoidOffset屬性并不會影響到所有場景中的實體。如果想要對單獨的場景實體進行深度測試平面的偏移量設置，需要參考Scene對象的depthPlaneEllipsoidOffset屬性。 -
msaaSamples:控制多重采樣（Multisample Anti-Aliasing，簡稱MSAA）的采樣數(shù)。MSAA是一種抗鋸齒技術，可以減少物體邊緣出現(xiàn)的鋸齒和走樣效果，提高渲染圖像的質(zhì)量。
通過將msaaSamples屬性設置為一個正整數(shù)，您可以指定每個像素采樣的次數(shù)。默認情況下，這個屬性被設置為4，表示每個像素采樣4次，以獲得更平滑的邊緣效果。如果您將這個值設置為0或1，將禁用MSAA，將不會進行多重采樣，從而降低了渲染質(zhì)量。
需要注意的是，增加MSAA采樣數(shù)會增加GPU的計算負擔和內(nèi)存消耗，可能會影響場景的性能。因此，在使用MSAA時應該謹慎選擇采樣數(shù)，并進行必要的測試和優(yōu)化。
使用flyTo方法飛行到指定位置
// 定義目標位置和視角
var targetPosition = Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 1500);
var heading = Cesium.Math.toRadians(90.0);
var pitch = Cesium.Math.toRadians(-45.0);
var roll = Cesium.Math.toRadians(0.0);
// 相機飛到目標點
viewer.camera.flyTo({
destination: targetPosition,
orientation: {
heading:heading,
pitch:pitch,
roll:roll
},
duration: 3 // 飛行動畫時長
});
刷新瀏覽器，可以看到飛行的過渡效果
Viewer類是Cesium中非常重要的類，它提供了許多常用的功能，如地形數(shù)據(jù)加載、影像數(shù)據(jù)加載、高度測量以及繪制幾何圖形等，后面會進行介紹，這次先介紹到這里，喜歡的小伙伴點贊關注加收藏哦文章來源地址http://www.zghlxwxcb.cn/news/detail-478562.html
到了這里，關于Cesium入門之五：認識Cesium中的Viewer的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
