Cesium學習筆記（四）Camera
阿新 • • 發佈：2017-11-03
ttr can str efault 簡單的 list 事件處理 get provider
http://blog.csdn.net/HobHunter/article/details/74909641
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);
}
});Cesium學習筆記（四）Camera