Cesium学习笔记（四）Camera
生活随笔
收集整理的這篇文章主要介紹了
Cesium学习笔记（四）Camera
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
http://blog.csdn.net/HobHunter/article/details/74909641
?
?
Cesium 相機(jī)控制場景中的視野。操作相機(jī)的方法有很多，如旋轉(zhuǎn)，縮放，平移和飛到目的地。Cesium具有默認(rèn)的鼠標(biāo)和觸摸事件處理程序與相機(jī)進(jìn)行交互，還有一個API以編程方式操縱相機(jī)。
我們可以使用該setView功能設(shè)置相機(jī)的位置和方向。目的地可以是一個實例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), // 設(shè)置位置 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
通過調(diào)用Camera這個方法可以跳轉(zhuǎn)鏡頭到指定位置。具體用法和上面類似.
view.camera.flyTo({destination : Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 設(shè)置位置orientation: {heading : Cesium.Math.toRadians(20.0), // 方向 pitch : Cesium.Math.toRadians(-90.0),// 傾斜角度 roll : 0 }, duration:5, // 設(shè)置飛行持續(xù)時間，默認(rèn)會根據(jù)距離來計算 complete: function () { // 到達(dá)位置后執(zhí)行的回調(diào)函數(shù) console.log('到達(dá)目的地'); }, cancle: function () { // 如果取消飛行則會調(diào)用此函數(shù) console.log('飛行取消') }, pitchAdjustHeight: -90, // 如果攝像機(jī)飛越高于該值，則調(diào)整俯仰俯仰的俯仰角度，并將地球保持在視口中。 maximumHeight:5000, // 相機(jī)最大飛行高度 flyOverLongitude: 100, // 如果到達(dá)目的地有2種方式，設(shè)置具體值后會強(qiáng)制選擇方向飛過這個經(jīng)度 });- 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 | 目標(biāo)位置在世界坐標(biāo)。 |
| offset | Cartestian 或 HeadingPitchRange | 以目標(biāo)為中心的當(dāng)?shù)貣|北向參考系中的目標(biāo)的偏移量。 |
- 1
- 2
- 3
- 4
- 5
lookAt會將視角固定在設(shè)置的點上
官網(wǎng)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; // 獲取地球球體對象 // 禁用默認(rèn)的事件處理程序 // 如果為真，則允許用戶旋轉(zhuǎn)相機(jī)。如果為假，相機(jī)將鎖定到當(dāng)前標(biāo)題。此標(biāo)志僅適用于2D和3D。 scene.screenSpaceCameraController.enableRotate = false; // 如果為true，則允許用戶平移地圖。如果為假，相機(jī)將保持鎖定在當(dāng)前位置。此標(biāo)志僅適用于2D和Columbus視圖模式。 scene.screenSpaceCameraController.enableTranslate = false; // 如果為真，允許用戶放大和縮小。如果為假，相機(jī)將鎖定到距離橢圓體的當(dāng)前距離 scene.screenSpaceCameraController.enableZoom = false; // 如果為真，則允許用戶傾斜相機(jī)。如果為假，相機(jī)將鎖定到當(dāng)前標(biāo)題。這個標(biāo)志只適用于3D和哥倫布視圖。 scene.screenSpaceCameraController.enableTilt = false; // 如果為true，則允許用戶使用免費外觀。如果錯誤，攝像機(jī)視圖方向只能通過轉(zhuǎn)換或旋轉(zhuǎn)進(jìn)行更改。此標(biāo)志僅適用于3D和哥倫布視圖模式。 scene.screenSpaceCameraController.enableLook = false; // 鼠標(biāo)開始位置 var startMousePosition; // 鼠標(biāo)位置 var mousePosition; // 鼠標(biāo)狀態(tài)標(biāo)志 var flags = { looking : false, moveForward : false, // 向前 moveBackward : false, // 向后 moveUp : false,// 向上 moveDown : false,// 向下 moveLeft : false,// 向左 moveRight : false// 向右 }; var handler = new Cesium.ScreenSpaceEventHandler(canvas); // 接收用戶鼠標(biāo)（手勢）事件 handler.setInputAction(function(movement) { // 處理鼠標(biāo)按下事件 // movement: 接收值為一個對象，含有鼠標(biāo)單擊的x，y坐標(biāo) flags.looking = true; // 設(shè)置鼠標(biāo)當(dāng)前位置 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position); }, Cesium.ScreenSpaceEventType.LEFT_DOWN); handler.setInputAction(function(movement) { // 處理鼠標(biāo)移動事件 // 更新鼠標(biāo)位置 mousePosition = movement.endPosition; }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); handler.setInputAction(function(position) { // 處理鼠標(biāo)左鍵彈起事件 flags.looking = false; }, Cesium.ScreenSpaceEventType.LEFT_UP); // 根據(jù)鍵盤按鍵返回標(biāo)志 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; } } // 監(jiān)聽鍵盤按下事件 document.addEventListener('keydown', function(e) { // 獲取鍵盤返回的標(biāo)志 var flagName = getFlagForKeyCode(e.keyCode); if (typeof flagName !== 'undefined') { flags[flagName] = true; } }, false); // 監(jiān)聽鍵盤彈起時間 document.addEventListener('keyup', function(e) { // 獲取鍵盤返回的標(biāo)志 var flagName = getFlagForKeyCode(e.keyCode); if (typeof flagName !== 'undefined') { flags[flagName] = false; } }, false); // 對onTick事件進(jìn)行監(jiān)聽 // onTick事件：根據(jù)當(dāng)前配置選項，從當(dāng)前時間提前計時。應(yīng)該每個幀都調(diào)用tick，而不管動畫是否發(fā)生。 // 簡單的說就是每過一幀都會執(zhí)行這個事件 viewer.clock.onTick.addEventListener(function(clock) { // 獲取實例的相機(jī)對象 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); } // 獲取相機(jī)高度 // cartesianToCartographic(): 將笛卡爾坐標(biāo)轉(zhuǎn)化為地圖坐標(biāo)，方法返回Cartographic對象，包含經(jīng)度、緯度、高度 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); } });轉(zhuǎn)載于:https://www.cnblogs.com/yanan-boke/p/7777741.html
總結(jié)
以上是生活随笔為你收集整理的Cesium学习笔记（四）Camera的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “chaos”的算法--之Floyd算法
- 下一篇： 悠中选优，畅享马尔代夫与塞舌尔之旅