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 ----http://blog.csdn.net/hobhunter/article/details/74909641的更多相关文章

  1. Mui本地打包笔记（一）使用AndroidStudio运行项目 转载 https://blog.csdn.net/baidu_32377671/article/details/79632411

    转载 https://blog.csdn.net/baidu_32377671/article/details/79632411 使用AndroidStudio运行HBuilder本地打包的Mui项目 ...

  2. 学习mongoDB的一些感受（转自：http://blog.csdn.net/liusong0605/article/details/11581019）

    曾经使用过mongoDB来保存文件,最一开始,只是想总结一下在开发中如何实现文件与mongoDB之间的交互.在此之前,并没有系统的了解过mongoDB,虽然知道我们用它来存储文件这些非结构化数据,但是 ...

  3. K8S 使用NFS 创建PV和PVC的例子 学习From https://blog.csdn.net/xts_huangxin/article/details/51494472

    1. 获取资料 网址: https://blog.csdn.net/xts_huangxin/article/details/51494472  感谢原作者 这里面 按照自己的机器情况进行了学习模仿 ...

  4. Bellman-ford算法的学习http://blog.csdn.net/niushuai666/article/details/6791765

    http://blog.csdn.net/niushuai666/article/details/6791765

  5. matplotlib绘图基本用法-转自（http://blog.csdn.net/mao19931004/article/details/51915016）

    本文转载自http://blog.csdn.net/mao19931004/article/details/51915016 <!DOCTYPE html PUBLIC "-//W3C ...

  6. golang语言并发与并行——goroutine和channel的详细理解（一） 转发自https://blog.csdn.net/skh2015java/article/details/60330785

    如果不是我对真正并行的线程的追求,就不会认识到Go有多么的迷人. Go语言从语言层面上就支持了并发,这与其他语言大不一样,不像以前我们要用Thread库 来新建线程,还要用线程安全的队列库来共享数据. ...

  7. Win32消息循环机制等【转载】http://blog.csdn.net/u013777351/article/details/49522219

    Dos的过程驱动与Windows的事件驱动 在讲本程序的消息循环之前,我想先谈一下Dos与Windows驱动机制的区别: DOS程序主要使用顺序的,过程驱动的程序设计方法.顺序的,过程驱动的程序有一个 ...

  8. http://blog.csdn.net/u014595019/article/details/52805444

    http://blog.csdn.net/u014595019/article/details/52805444 tensorflow笔记系列: (一) tensorflow笔记:流程,概念和简单代码 ...

  9. http://blog.csdn.net/v_july_v/article/details/6543438

    本文转载至: http://blog.csdn.net/v_july_v/article/details/6543438 算法 程序员面试.算法研究.编程艺术.红黑树.数据挖掘5大经典原创系列集锦与总 ...

随机推荐

  1. memory management in oracle 11G R2

    When we talking about memory management in Oracle, we are refering to SGA and PGA. The management me ...

  2. centos 7: 迁移MySQL目录

    Steps: 1. systemctl stop mariadb 2. mkdir data destination folder, ex: /home/mysql 3. cp -R /var/lib ...

  3. DICOM：dcm4che工具包怎样压缩dcm文件探讨（续篇）

    背景 前段时间博文DICOM:dcm4che工具包怎样压缩dcm文件探讨(前篇)提到了一个问题:"利用dcm4che工具包中的dcm2dcm来进行dcm文件的压缩和加压缩.即改变dcm文件里 ...

  4. 终于理解java的classpath!

    JAVA 的CLASSPATH 上面这样是可以的!!!!哇, 再也不会出现编译或是运行的时候,class 找不到的问题了.终于明白为什么了. java -cp  /ysr/my-app  P  这条命 ...

  5. s:actionmessage页面样式失效

    1,  s:actionmessage页面样式失效: 2,解决方式: 将样式直接写入s:actionmessage标签中:<span><s:actionmessage cssSt ...

  6. Codeforces Round #273 (Div. 2)D. Red-Green Towers DP

    D. Red-Green Towers   There are r red and g green blocks for construction of the red-green tower. Re ...

  7. java反射中getDeclaredMethods和getMethods的区别

    getDeclaredMethods()          返回 Method 对象的一个数组,这些对象反映此 Class 对象表示的类或接口声明的所有方法,包括公共.保护.默认(包)访问和私有方法, ...

  8. 使用 StackExchange.Redis 封装属于自己的 RedisHelper

    目录 核心类 ConnectionMultiplexer 字符串(String) 哈希(Hash) 列表(List) 有序集合(sorted set) Key 操作 发布订阅 其他 简介 目前 .NE ...

  9. Kernel trick----PRML读书笔记

    Many linear parametric models can be re-cast into an equivalent 'dual representstion' in which the p ...

  10. Windows7安装SQLServer 2008图解

    Windows7安装SQL Server 2008图解        这几天因为需要,一直想安装SQL Server 2008来作为Web后台的数据库进行些实验,但总是没有时间,今天终于有时间了,便安 ...