Cesium入門8 - Configuring the Scene - 配置視窗

Cesium入門8 - Configuring the Scene - 配置視窗

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

接下來將添加一些更多的正確的時間和空間設置到Viewer中。涉及到與viewer.scene進行交互，該類控制了viewer中的全部圖形元素。

1. 首先，咱們配置一下咱們的scene，用如下代碼激活基於太陽位置的光照：

// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;

按照以上配置，咱們scene(場景)中的光照將會隨着天天時間的變化而變化。若是你zoom out，你就會看到一部分數字地球位於黑暗之中，由於模擬真實的地球，太陽只能照射到地球的一部分。

2. 在咱們開始初始化啓動view以前，咱們先簡略的過一下一些基礎的Cesium類型：

• Cartesian3 : 一個三維笛卡爾座標——當它被用做相對於地球中心的位置時，使用地球固定框架（ECEF）。
• Cartographic : 由經度、緯度（弧度）和WGS84橢球面高度肯定的位置。
• HeadingPitchRoll : 在東北向上的框架中關於局部軸的旋轉（弧度）。航向是圍繞負Z軸的旋轉。俯仰是圍繞負Y軸的旋轉。滾動是關於正X軸的旋轉。
• Quaternion :以4D座標表示的3D旋轉。

這些是在場景中定位和定位Cesium objects所必需的基本類型，而且有許多有用的轉換方法。請參閱每種類型的文檔以瞭解更多信息。

如今讓咱們把相機定位在咱們數據所在的NYC（紐約）的場景中。

Camera Control

相機是viewer.scene中的屬性，用來控制當前可見的域。咱們能夠經過直接設置它的位置和方向來控制相機，或者經過使用Cesium提供的API來控制相機，它被設計成指定相機的位置和方向隨時間的變化。

一些最經常使用的方法以下：

• Camera.setView(options): 在特定位置和方向當即設置相機。
• Camera.zoomIn(amount): 沿着視角矢量移動攝像機。
• Camera.zoomOut(amount): 沿視角矢量向後移動攝像機。
• Camera.flyTo(options): 建立從當前相機位置到新位置的動畫相機飛行。
• Camera.lookAt(target, offset) : 定位並定位攝像機以給定偏移量瞄準目標點。
• Camera.move(direction, amount) : 朝任何方向移動攝像機。
• Camera.rotate(axis, angle) : 繞任意軸旋轉相機。

進一步得到API功能，看看這些相機演示：

• Camera API Demo
• Custom Camera Controls Demo

讓咱們嘗試一種方法將相機跳轉到紐約。使用camera.setView()初始化view，使用Cartesian3和HeadingpitchRoll指定相機的位置和方向:

// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
    destination : initialPosition,
    orientation : {
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

相機如今被定位和定向以俯瞰曼哈頓，而且咱們的視圖參數被保存在一個對象中，咱們能夠將其傳遞給其餘相機方法。

實際上，咱們可使用這個相同的視角來更新按下home按鈕的效果。咱們沒必要讓它從遠處返回地球的默認視角，咱們能夠重寫按鈕，使咱們看到曼哈頓的初始視角。咱們能夠經過添加幾個選項來調整動畫，而後添加一個取消默認航班的事件偵聽器，並調用**FlyTo()**咱們的Home視角：

// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    e.cancel = true;
    viewer.scene.camera.flyTo(homeCameraView);
});

更多關於基本相機控制，請訪問咱們的Camera Tutorial。

Clock Control

接下來，咱們配置viewer的Clock和Timline來控制scene的時間進度。

這裏是clock的相關API

當使用特定時間時，Cesium使用JulandDATE類型，它存儲了1月1日中午以來的天數-4712（公元前4713年）。爲了提升精度，該類將日期和秒的所有部分存儲在單獨的組件中。爲了計算安全和表明跳躍秒，日期老是存儲在國際原子時間標準中。

下面是咱們如何設置場景時間選項的例子：

// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

這設置場景動畫的速率、開始和中止時間，並告訴時鐘在到達中止時間時循環回到開始。它還將時間線控件設置爲適當的時間範圍。看看這個時鐘示例代碼來測試時鐘設置。

這是咱們的初始場景配置！如今，當你運行你的應用程序時，你應該看到如下內容：

Cesium中文網交流QQ羣：807482793

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