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, // 如果到达目的地有2种方式，设置具体值后会强制选择方向飞过这个经度 }); 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)); 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

vip888

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>

此内容登录或注册后可见