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>
...
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
}
})
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,
});
lookAt
lookAt(target, offect)
名称类型描述
targetCartesian3目标位置在世界坐标。offsetCartestian 或 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))
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;
scene.screenSpaceCameraController.enableRotate =
false;
scene.screenSpaceCameraController.enableTranslate =
false;
scene.screenSpaceCameraController.enableZoom =
false;
scene.screenSpaceCameraController.enableTilt =
false;
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) {
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);
viewer.clock.onTick.addEventListener(
function(clock) {
var camera = viewer.camera;
if (flags.looking) {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
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);
}
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);
}
});
