Cesium学习笔记Camera

Posted 杨亚男

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Cesium学习笔记Camera相关的知识，希望对你有一定的参考价值。

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的主要内容，如果未能解决你的问题，请参考以下文章

Cesium中的视角锁定

cesium 相机camera

cesium 设置和移动camera相机（工具篇）

Cesium入门12 - Camera Modes - 相机模式

Cesium 地球旋转（viewer.scene.camera.rotate（））以及停止旋转

Cesium常用代码总结