Viewer界面介紹
任何Cesium應(yīng)用程序的基礎(chǔ)都是Viewer印衔，Viewer是一個帶有多種功能的可交互的三位數(shù)字地球的容器迁央。在Cesium開發(fā)入門篇 | 02Cesium開發(fā)環(huán)境搭建及第一個示例中我們已經(jīng)通過以下代碼初始化了一個視圖窗口盟步，看到了一個基本的數(shù)字地球莉炉。
var viewer = new Cesium.Viewer("cesiumContainer");
默認地肿孵，場景支持鼠標（電腦端）和手指觸摸（移動端）交互，并且支持以下相機漫游方式：
- 按住鼠標左鍵拖拽 - 讓相機在數(shù)字地球平面平移
- 按住鼠標右鍵拖拽 - 放縮相機
- 鼠標滾輪滑動 - 放縮相機
-
按住鼠標中鍵拖拽 - 在當前地球的屏幕中間點蒜焊，旋轉(zhuǎn)相機
同時初始化界面也默認自帶了一些組件，其初始化場景及組件數(shù)字標號如下圖所示：
初始化場景
每一個組件的描述如下：
Geocoder：查找位置工具科贬，查找到之后會將鏡頭對準找到的地址泳梆，默認使用微軟的Bing地圖
HomeButton：首頁位置，點擊之后將視圖跳轉(zhuǎn)到默認全球視角
SceneModePicker：選擇視角的模式榜掌，3D优妙，2D，哥倫布視圖(CV)
BaseLayerPicker：圖層選擇器憎账，選擇要顯示的地圖服務(wù)和地形服務(wù)
NavigationHelpButton：導航幫助按鈕套硼，顯示默認的地圖控制幫助
Animation：動畫器件，控制視圖動畫的播放速度
CreditsDisplay：展示商標版權(quán)和數(shù)據(jù)歸屬
Timeline：時間軸胞皱，指示當前時間邪意，并允許用戶跳到特定的時間
FullscreenButton：全屏按鈕
組件顯隱
初始化界面比較怪，領(lǐng)導不喜歡反砌，看著不爽抄罕，怎么辦？先別急于颖，下面我們可采用兩種方式呆贿，讓這些組件立刻消失在我們眼前。
通過js代碼控制
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, // 動畫小組件
baseLayerPicker: false, // 底圖組件森渐，選擇三維數(shù)字地球的底圖（imagery and terrain）做入。
fullscreenButton: false, // 全屏組件
vrButton: false, // VR模式
geocoder: false, // 地理編碼（搜索）組件
homeButton: false, // 首頁，點擊之后將視圖跳轉(zhuǎn)到默認視角
infoBox: false, // 信息框
sceneModePicker: false, // 場景模式同衣，切換2D竟块、3D 和 Columbus View (CV) 模式。
selectionIndicator: false, //是否顯示選取指示器組件
timeline: true, // 時間軸
navigationHelpButton: false, // 幫助提示耐齐，如何操作數(shù)字地球浪秘。
// 如果最初應(yīng)該看到導航說明蒋情，則為true；如果直到用戶明確單擊該按鈕耸携，則該提示不顯示棵癣，否則為false。
navigationInstructionsInitiallyVisible: false,
});
// 隱藏logo
viewer._cesiumWidget._creditContainer.style.display = "none";
通過css代碼控制
/* 通過CSS控制組件顯隱及位置 */
.cesium-viewer-toolbar, /* 右上角按鈕組 */
.cesium-viewer-animationContainer, /* 左下角動畫控件 */
.cesium-viewer-timelineContainer, /* 時間線 */
.cesium-viewer-bottom /* logo信息 */ {
display: none !important;
}
.cesium-widget-credits /* 隱藏logo圖片 */ {
display: none !important;
}
.cesium-viewer-fullscreenContainer /* 全屏按鈕 */ {
display: none !important;
position: absolute;
top: 0;
}
通過以上兩種方式中任何一種夺衍，組件都會消失狈谊，如下圖所示。這下看著就比較順眼了沟沙，剩下的工作就交給UI人員了河劝，高大上的頁面全部指望他們了。
