cesium編程入門(四)界面介紹及小控件隱藏

感性認識

界面介紹，viewer

1. Geocoder : 查找位置工具，查找到以後會將鏡頭對準找到的地址，默認使用bing地圖
2. Home Button :視角返回初始位置.
3. Scene Mode Picker : 選擇視角的模式，有三種：3D，2D，哥倫布視圖（CV）
4. Base Layer Picker : 圖層選擇器，選擇要顯示的地圖服務和地形服務.
5. Navigation Help Button :導航幫助按鈕，顯示默認的地圖控制幫助.
6. Animation : 動畫器件，控制視圖動畫的播放速度.
7. Timeline :時間線,指示當前時間，並容許用戶跳到特定的時間.
8. Credits Display :版權顯示，顯示數據歸屬，必選 9.Fullscreen Button :全屏按鈕.

隱藏界面中的元素

在開發本身的項目時，有時候須要對界面作必定的定製，這就須要隱藏一部分界面中的元素，下面咱們來看看各個元素的描述

首先建立一個空的工程來測試，源碼在https://gitee.com/HQCode/Cesium-test

方法一 經過js代碼控制

界面上默認的小控件能夠經過在初始化Viewer的時候設置相應的屬性來關閉，一下列出了界面默認的小控件的關閉方法，還有不少額外的屬性，能夠查看 幫助文檔

<div id="credit"></div>
var viewer = new Cesium.Viewer('cesiumContainer',{
geocoder:false,
homeButton:false,
sceneModePicker:false,
baseLayerPicker:false,
navigationHelpButton:false,
animation:false,
creditContainer:"credit",
timeline:false,
fullscreenButton:false,
vrButton:false,
// skyBox : new Cesium.SkyBox({
// sources : {
// positiveX : 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
// negativeX : 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
// positiveY : 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
// negativeY : 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
// positiveZ : 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
// negativeZ : 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
// }
// })
});

相關代碼lesson01-index.html

若是控件已經建立了，也能夠這樣:

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.animation.container.style.display = "none";
viewer.baseLayerPicker.container.style.display = "none";

//版權清理
viewer.cesiumWidget.creditContainer.style.display = "none";
viewer.bottomContainer.style.display = "none";

方法二 經過css控制

/* 不佔據空間，沒法點擊 */
.cesium-viewer-toolbar, /* 右上角按鈕組 */
.cesium-viewer-animationContainer, /* 左下角動畫控件 */
.cesium-viewer-timelineContainer, /* 時間線 */
.cesium-viewer-bottom /* logo信息 */
{
display: none;
}
.cesium-viewer-fullscreenContainer /* 全屏按鈕 */
{ position: absolute; top: -999em; }

注：全屏按鈕不能經過display:none的方式來達到隱藏的目的，這是由於生成的按鈕控件的行內樣式設置了display屬性，會覆蓋引入的css屬性

<div class="cesium-viewer-fullscreenContainer" style="display: block;">...</div>

相關代碼lesson01-index02.html

顯示幀速（FPS）

viewer.scene.debugShowFramesPerSecond = true;