Cesium入門8 - Configuring the Scene - 配置視窗
Cesium中文網(wǎng):http://cesiumcn.org/ | 國內(nèi)快速訪問:http://cesium.coinidea.com/
接下來將添加一些更多的正確的時間和空間設(shè)置到Viewer中。涉及到與viewer.scene進(jìn)行交互,該類控制了viewer中的所有圖形元素。
- 首先,我們配置一下我們的scene,用以下代碼激活基于太陽位置的光照:
// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;
按照以上配置,我們scene(場景)中的光照將會隨著每天時間的變化而變化。如果你zoom out,你就會看到一部分?jǐn)?shù)字地球位于黑暗之中,因為模擬真實的地球,太陽只能照射到地球的一部分。
- 在我們開始初始化啟動view之前,我們先簡略的過一下一些基礎(chǔ)的Cesium類型:
- Cartesian3 : 一個三維笛卡爾坐標(biāo)——當(dāng)它被用作相對于地球中心的位置時,使用地球固定框架(ECEF)。
- Cartographic : 由經(jīng)度、緯度(弧度)和WGS84橢球面高度確定的位置。
- HeadingPitchRoll : 在東北向上的框架中關(guān)于局部軸的旋轉(zhuǎn)(弧度)。航向是圍繞負(fù)Z軸的旋轉(zhuǎn)。俯仰是圍繞負(fù)Y軸的旋轉(zhuǎn)。滾動是關(guān)于正X軸的旋轉(zhuǎn)。
- Quaternion :以4D坐標(biāo)表示的3D旋轉(zhuǎn)。
這些是在場景中定位和定位Cesium objects所必需的基本類型,并且有許多有用的轉(zhuǎn)換方法。請參閱每種類型的文檔以了解更多信息。
現(xiàn)在讓我們把相機(jī)定位在我們數(shù)據(jù)所在的NYC(紐約)的場景中。
Camera Control
相機(jī)是viewer.scene中的屬性,用來控制當(dāng)前可見的域。我們可以通過直接設(shè)置它的位置和方向來控制相機(jī),或者通過使用Cesium提供的API來控制相機(jī),它被設(shè)計成指定相機(jī)的位置和方向隨時間的變化。
一些最常用的方法如下:
- Camera.setView(options): 在特定位置和方向立即設(shè)置相機(jī)。
- Camera.zoomIn(amount): 沿著視角矢量移動攝像機(jī)。
- Camera.zoomOut(amount): 沿視角矢量向后移動攝像機(jī)。
- Camera.flyTo(options): 創(chuàng)建從當(dāng)前相機(jī)位置到新位置的動畫相機(jī)飛行。
- Camera.lookAt(target, offset) : 定位并定位攝像機(jī)以給定偏移量瞄準(zhǔn)目標(biāo)點。
- Camera.move(direction, amount) : 朝任何方向移動攝像機(jī)。
- Camera.rotate(axis, angle) : 繞任意軸旋轉(zhuǎn)相機(jī)。
進(jìn)一步獲得API功能,看看這些相機(jī)演示:
讓我們嘗試一種方法將相機(jī)跳轉(zhuǎn)到紐約。使用camera.setView()初始化view,使用Cartesian3和HeadingpitchRoll指定相機(jī)的位置和方向:
// 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);
相機(jī)現(xiàn)在被定位和定向以俯瞰曼哈頓,并且我們的視圖參數(shù)被保存在一個對象中,我們可以將其傳遞給其他相機(jī)方法。
實際上,我們可以使用這個相同的視角來更新按下home按鈕的效果。我們不必讓它從遠(yuǎn)處返回地球的默認(rèn)視角,我們可以重寫按鈕,使我們看到曼哈頓的初始視角。我們可以通過添加幾個選項來調(diào)整動畫,然后添加一個取消默認(rèn)航班的事件偵聽器,并調(diào)用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);
});
更多關(guān)于基本相機(jī)控制,請訪問我們的Camera Tutorial。
Clock Control
接下來,我們配置viewer的Clock和Timline來控制scene的時間進(jìn)度。
當(dāng)使用特定時間時,Cesium使用JulandDATE類型,它存儲了1月1日中午以來的天數(shù)-4712(公元前4713年)。為了提高精度,該類將日期和秒的全部部分存儲在單獨的組件中。為了計算安全和代表跳躍秒,日期總是存儲在國際原子時間標(biāo)準(zhǔn)中。
下面是我們?nèi)绾卧O(shè)置場景時間選項的例子:
// 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
這設(shè)置場景動畫的速率、開始和停止時間,并告訴時鐘在到達(dá)停止時間時循環(huán)回到開始。它還將時間線控件設(shè)置為適當(dāng)?shù)臅r間范圍??纯催@個時鐘示例代碼來測試時鐘設(shè)置。
這是我們的初始場景配置!現(xiàn)在,當(dāng)你運行你的應(yīng)用程序時,你應(yīng)該看到以下內(nèi)容:

Cesium中文網(wǎng)交流QQ群:807482793
Cesium中文網(wǎng):http://cesiumcn.org/ | 國內(nèi)快速訪問:http://cesium.coinidea.com/