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>

...

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的更多相关文章

C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...
Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
Typescript 学习笔记四：回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值在实际开发有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制
目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数使用示例 EventLoop对eventfd的封装工作时序 runInLoo ...
python3.4学习笔记(四) 3.x和2.x的区别，持续更新
python3.4学习笔记(四) 3.x和2.x的区别在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...
Go语言学习笔记四：运算符
Go语言学习笔记四: 运算符这章知识好无聊呀,本来想跨过去,但没准有初学者要学,还是写写吧. 运算符种类与你预期的一样,Go的特点就是啥都有,爱用哪个用哪个,所以市面上的运算符基本都有. 算术运算 ...
零拷贝详解 Java NIO学习笔记四（零拷贝详解）
转 https://blog.csdn.net/u013096088/article/details/79122671 Java NIO学习笔记四(零拷贝详解) 2018年01月21日 20:20:5 ...

随机推荐

STL源代码剖析(二) - 迭代器与traits技法
提要先看一段用迭代器的代码: int a[] = {1, 2, 3, 4, 5}; vector<int> v1( a, a+5); vector<int>::iterato ...
Windows 9立即公布了
Windows 9技术预览版可能于今晚在美国旧金山举办的Windows公布会上宣布.下一代的Windows名称最有可能是Windows或Windows 9.网友猜想也可能是WIndows X或Wind ...
站点过滤器Filter
--过滤器使用已经非常久了,今天遇到了一个小问题.也就想顺便写一个关于过滤器的博文.记录一下自己使用的感受. 实际上,Filter与Servlet及其相似,差别仅仅是FIlter的doFilter() ...
Ubuntu 12.04 LTS 无法进入桌面环境
今天开机后,在登陆的时候,进入了登陆界面(选择用户,输入密码的那个界面),输入正确的密码后屏幕跳转了一下,但是很快又回到了登陆界面.然后我就尝试以guest [访客]的身份登陆,发现进入了桌面系统. ...
Android与IOS异同点对照（1）------ 显示
Android与IOS作为当前世界上最流行的两大移动端操作系统,都拥有无数的粉丝. 那么对于Android或者IOS的开发人员来说,这两个系统都拥有什么同样或者不同的地方那?如今让我们一起来了解一下A ...
Android 自己定义圆圈进度并显示百分比例控件（纯代码实现）
首先,感谢公司能给我闲暇的时间,来稳固我的技术,让我不断的去探索研究,在此不胜感激. 先不说实现功能,上图看看效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...
linux 统计文件夹信息
ls -lR|grep "^-"|wc -l Linux 统计某个字符串出现的次数 - ywl925 - 博客园 https://www.cnblogs.com/ywl925/p/ ...
POJ2492 A Bug's Life 判断二分图
给一个无向图,判断是否为二分图是否有奇环.用染色法解决,也可以用并查集解决,时间复杂度是相同的,但是并查集用的内存少. 这里给出Bfs染色的代码 #include<iostream> # ...
VPS主机
腾讯云企业认证备案域名要是顶级域名格式,所以不能是www.blueheartzf.com,而要是blueheartzf.com
作业训练------通过读取c.txt文件中的内容等号右值，并将右值的最大值、最小值、平均值打印到屏幕上。
这篇博客是学习传智播客c++教程的作业,通过在网上进行搜集来完成,但是网上有相似的代码,但是结果总是有点问题,所以本文写了这篇记录下. #include <stdio.h> #includ ...

Cesium学习笔记（四）Camera

setView

Cartesian 方式

Rectangle 方式

flyTo

lookAt

官网Demo笔记

Cesium学习笔记（四）Camera的更多相关文章

随机推荐

热门专题