Cesium 相機控制場景中的視野。操作相機的方法有很多，如旋轉，縮放，平移和飛到目的地。Cesium具有默認的鼠標和觸摸事件處理程序與相機進行交互，還有一個API以編程方式操縱相機。
我們可以使用該setView功能設置相機的位置和方向。目的地可以是一個實例Cartesian3或Rectangle，方向可以是航向/俯仰/卷或方向/向上
setView
Cartesian 方式
... <body> <div id="cesiumDemo"></div> <script type="text/javascript"> var view = new Cesium.Viewer('cesiumDemo',{ baseLayerPicker: false, imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer' }) }); // Cartesian 方式確定位置 view.camera.setView({ destination : Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 設置位置 orientation: { heading : Cesium.Math.toRadians(20.0), // 方向 pitch : Cesium.Math.toRadians(-90.0),// 傾斜角度 roll : 0 } }); </script> </body> ...- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
Rectangle 方式
// rectangle 方式
view.camera.setView({ destination: Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0), orientation: { heading : Cesium.Math.toRadians(20.0), // 方向 pitch : Cesium.Math.toRadians(-90.0),// 傾斜角度 roll : 0 } });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
flyTo
通過調用Camera這個方法可以跳轉鏡頭到指定位置。具體用法和上面類似.
view.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 設置位置 orientation: { heading : Cesium.Math.toRadians(20.0), // 方向 pitch : Cesium.Math.toRadians(-90.0),// 傾斜角度 roll : 0 }, duration:5, // 設置飛行持續時間，默認會根據距離來計算 complete: function () { // 到達位置后執行的回調函數 console.log('到達目的地'); }, cancle: function () { // 如果取消飛行則會調用此函數 console.log('飛行取消') }, pitchAdjustHeight: -90, // 如果攝像機飛越高於該值，則調整俯仰俯仰的俯仰角度，並將地球保持在視口中。 maximumHeight:5000, // 相機最大飛行高度 flyOverLongitude: 100, // 如果到達目的地有2種方式，設置具體值后會強制選擇方向飛過這個經度 });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
lookAt
lookAt(target, offect)
| 名稱 | 類型 | 描述 |
|---|---|---|
| target | Cartesian3 | 目標位置在世界坐標。 |
| offset | Cartestian 或 HeadingPitchRange | 以目標為中心的當地東北向參考系中的目標的偏移量。 |
var center = Cesium.Cartesian3.fromDegrees(-72.0, 40.0); var heading = Cesium.Math.toRadians(50.0); var pitch = Cesium.Math.toRadians(-20.0); var range = 5000.0; view.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));- 1
- 2
- 3
- 4
- 5
lookAt會將視角固定在設置的點上
官網Demo筆記
var viewer = new Cesium.Viewer('cesiumDemo',{ baseLayerPicker: false, imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer' }) }); var scene = viewer.scene; var canvas = viewer.canvas; // 獲取畫布 canvas.setAttribute('tabindex', '0'); // 獲取焦點 canvas.onclick = function() { canvas.focus(); }; var ellipsoid = viewer.scene.globe.ellipsoid; // 獲取地球球體對象 // 禁用默認的事件處理程序 // 如果為真，則允許用戶旋轉相機。如果為假，相機將鎖定到當前標題。此標志僅適用於2D和3D。 scene.screenSpaceCameraController.enableRotate = false; // 如果為true，則允許用戶平移地圖。如果為假，相機將保持鎖定在當前位置。此標志僅適用於2D和Columbus視圖模式。 scene.screenSpaceCameraController.enableTranslate = false; // 如果為真，允許用戶放大和縮小。如果為假，相機將鎖定到距離橢圓體的當前距離 scene.screenSpaceCameraController.enableZoom = false; // 如果為真，則允許用戶傾斜相機。如果為假，相機將鎖定到當前標題。這個標志只適用於3D和哥倫布視圖。 scene.screenSpaceCameraController.enableTilt = false; // 如果為true，則允許用戶使用免費外觀。如果錯誤，攝像機視圖方向只能通過轉換或旋轉進行更改。此標志僅適用於3D和哥倫布視圖模式。 scene.screenSpaceCameraController.enableLook = false; // 鼠標開始位置 var startMousePosition; // 鼠標位置 var mousePosition; // 鼠標狀態標志 var flags = { looking : false, moveForward : false, // 向前 moveBackward : false, // 向后 moveUp : false,// 向上 moveDown : false,// 向下 moveLeft : false,// 向左 moveRight : false// 向右 }; var handler = new Cesium.ScreenSpaceEventHandler(canvas); // 接收用戶鼠標（手勢）事件 handler.setInputAction(function(movement) { // 處理鼠標按下事件 // movement: 接收值為一個對象，含有鼠標單擊的x，y坐標 flags.looking = true; // 設置鼠標當前位置 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position); }, Cesium.ScreenSpaceEventType.LEFT_DOWN); handler.setInputAction(function(movement) { // 處理鼠標移動事件 // 更新鼠標位置 mousePosition = movement.endPosition; }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); handler.setInputAction(function(position) { // 處理鼠標左鍵彈起事件 flags.looking = false; }, Cesium.ScreenSpaceEventType.LEFT_UP); // 根據鍵盤按鍵返回標志 function getFlagForKeyCode(keyCode) { switch (keyCode) { case 'W'.charCodeAt(0): return 'moveForward'; case 'S'.charCodeAt(0): return 'moveBackward'; case 'Q'.charCodeAt(0): return 'moveUp'; case 'E'.charCodeAt(0): return 'moveDown'; case 'D'.charCodeAt(0): return 'moveRight'; case 'A'.charCodeAt(0): return 'moveLeft'; default: return undefined; } } // 監聽鍵盤按下事件 document.addEventListener('keydown', function(e) { // 獲取鍵盤返回的標志 var flagName = getFlagForKeyCode(e.keyCode); if (typeof flagName !== 'undefined') { flags[flagName] = true; } }, false); // 監聽鍵盤彈起時間 document.addEventListener('keyup', function(e) { // 獲取鍵盤返回的標志 var flagName = getFlagForKeyCode(e.keyCode); if (typeof flagName !== 'undefined') { flags[flagName] = false; } }, false); // 對onTick事件進行監聽 // onTick事件：根據當前配置選項，從當前時間提前計時。應該每個幀都調用tick，而不管動畫是否發生。 // 簡單的說就是每過一幀都會執行這個事件 viewer.clock.onTick.addEventListener(function(clock) { // 獲取實例的相機對象 var camera = viewer.camera; if (flags.looking) { // 獲取畫布的寬度 var width = canvas.clientWidth; // 獲取畫布的高度 var height = canvas.clientHeight; // Coordinate (0.0, 0.0) will be where the mouse was clicked. var x = (mousePosition.x - startMousePosition.x) / width; var y = -(mousePosition.y - startMousePosition.y) / height; var lookFactor = 0.05; camera.lookRight(x * lookFactor); camera.lookUp(y * lookFactor); } // 獲取相機高度 // cartesianToCartographic(): 將笛卡爾坐標轉化為地圖坐標，方法返回Cartographic對象，包含經度、緯度、高度 var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height; var moveRate = cameraHeight / 100.0; // 如果按下鍵盤就移動 if (flags.moveForward) { camera.moveForward(moveRate); } if (flags.moveBackward) { camera.moveBackward(moveRate); } if (flags.moveUp) { camera.moveUp(moveRate); } if (flags.moveDown) { camera.moveDown(moveRate); } if (flags.moveLeft) { camera.moveLeft(moveRate); } if (flags.moveRight) { camera.moveRight(moveRate); } });