Cesium入門4 - 建立Cesium Viewer

Cesium入門4 - 建立Cesium Viewer

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/

任何Cesium應用程序的基礎都是Viewer。Viewer是一個帶有多種功能的可交互的三位數字地球的容器（盒子）。建立一個Viewer和HTML中的一個id爲"cesiumContainer"的div綁定便可。

var viewer = new Cesium.Viewer('cesiumContainer');

使用以上代碼以後，能看到下圖所示的基本的數字地球：

默認地，場景支持鼠標（電腦）和手指（移動設備）交互。控制相機漫遊數字地球能夠經過如下方式：

• Left click and drag - Pans the camera over the surface of the globe.
• Right click and drag - Zooms the camera in and out.
• Middle wheel scrolling - Also zooms the camera in and out.
• Middle click and drag - Rotates the camera around the point on the surface of the globe. 翻譯
• 按住鼠標左鍵拖拽 - 讓相機在數字地球平面平移。
• 按住鼠標右鍵拖拽 - 放縮相機。
• 鼠標滾輪滑動 - 放縮相機。
• 按住鼠標中鍵拖拽 - 在當前地球的屏幕中間點，旋轉相機。

默認的Viewer自帶了一些有用的組件：

1. Geocoder : A location search tool that flies the camera to queried location. Uses Bing Maps data by default.
2. HomeButton : Flies the viewer back to a default view.
3. SceneModePicker : Switches between 3D, 2D and Columbus View (CV) modes.
4. BaseLayerPicker : Chooses the imagery and terrain to display on the globe.
5. NavigationHelpButton : Displays the default camera controls.
6. Animation : Controls the play speed for view animation.
7. CreditsDisplay : Displays data attributions. Almost always required!
8. Timeline : Indicates current time and allows users to jump to a specific time using the scrubber.
9. FullscreenButton : Makes the Viewer fullscreen.

翻譯

1. Geocoder : 一種地理位置搜索工具，用於顯示相機訪問的地理位置。默認使用微軟的Bing地圖。
2. HomeButton : 首頁位置，點擊以後將視圖跳轉到默認視角。
3. SceneModePicker : 切換2D、3D 和 Columbus View (CV) 模式。
4. BaseLayerPicker : 選擇三維數字地球的底圖（imagery and terrain）。
5. NavigationHelpButton : 幫助提示，如何操做數字地球。
6. Animation :控制視窗動畫的播放速度。
7. CreditsDisplay : 展現商標版權和數據源。
8. Timeline : 展現當前時間和容許用戶在進度條上拖動到任何一個指定的時間。
9. FullscreenButton : 視察全屏按鈕。

咱們能夠經過代碼來配置視窗組件，在咱們初始化視窗的時候，經過配置參數添加/移除相關組件。 如下代碼是經過參數配置獲得的viewer,該Viewer不帶selection indicators, base layer picker or scene mode picker等組件。

var viewer = new Cesium.Viewer('cesiumContainer', {
    scene3DOnly: true,
    selectionIndicator: false,
    baseLayerPicker: false
});

若是須要查看Viewer的完整配置，請查看：https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html。

Cesium中文網交流QQ羣：807482793

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/