相机可以控制我们在场景中的视野,默认的,相机操作是这样的:
- 左键单击并拖动 - 移动整个地图
- 右键单击并拖动 - 放大和缩小相机。
- 中轮滚动 - 也可以放大和缩小相机。
- 中间点击并拖动 - 围绕地球表面的点旋转相机。
我们可以自己给相机设置位置
var point = Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
camera.setView({
destination : point,
orientation: {
heading : Cesium.Math.toRadians(0.0), //默认值
pitch : Cesium.Math.toRadians(-90.0), // 默认值
roll : 0.0 //默认值
}
})
可以看出来,我们加载的是一个点,这个视野也是从这个点看去的视野,我们也可以加载一个矩形,也就是整个视野区域
//他需要西,南,东,北四个度数来构成
var rectangle = Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0)
camera.setView({
destination : point,
orientation: {
heading : Cesium.Math.toRadians(0.0), //默认值
pitch : Cesium.Math.toRadians(-90.0), // 默认值
roll : 0.0 //默认值
}
})
你现在所看到的区域就是我们加载的这个矩形了
现在,我们来尝试自己覆写镜头移动。
首先肯定是先把原有的给禁止掉
var viewer = new Cesium.Viewer("cesiumContainer");
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
};
继续为键盘的wasdqe几个键设置相机移动效果
function getFlagForKeyCode(keyCode) {
switch (keyCode) {
case 'W'.charCodeAt(0):
return 'moveUp';
case 'S'.charCodeAt(0):
return 'moveDown';
case 'Q'.charCodeAt(0):
return 'moveForward';
case 'E'.charCodeAt(0):
return 'moveBackward';
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);
别忘了,还有鼠标
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);
最后根据我们接收的鼠标和键盘的输入,来实现真正的相机移动
//更新相机
viewer.clock.onTick.addEventListener(function(clock) {
var camera = viewer.camera
//当按下鼠标左键时
if (flags.looking) {
var width = canvas.clientWidth
var height = canvas.clientHeight
// 鼠标滑动的距离的x或y/网页可见区域的宽或者高
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)
}
})
这里我们是把监听事件加载clock的onTick上的,这是一个以毫秒为单位的回调,完全可以保证我们的镜头移动的流畅
完整代码如下
var viewer = new Cesium.Viewer("cesiumContainer");
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 'moveUp';
case 'S'.charCodeAt(0):
return 'moveDown';
case 'Q'.charCodeAt(0):
return 'moveForward';
case 'E'.charCodeAt(0):
return 'moveBackward';
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) {
console.log("dida");
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);
}
});
参考资料:官网教程,官方API