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

Mui本地打包笔记（一）使用AndroidStudio运行项目转载 https://blog.csdn.net/baidu_32377671/article/details/79632411
转载 https://blog.csdn.net/baidu_32377671/article/details/79632411 使用AndroidStudio运行HBuilder本地打包的Mui项目 ...
学习mongoDB的一些感受（转自：http://blog.csdn.net/liusong0605/article/details/11581019）
曾经使用过mongoDB来保存文件,最一开始,只是想总结一下在开发中如何实现文件与mongoDB之间的交互.在此之前,并没有系统的了解过mongoDB,虽然知道我们用它来存储文件这些非结构化数据,但是 ...
K8S 使用NFS 创建PV和PVC的例子学习From https://blog.csdn.net/xts_huangxin/article/details/51494472
1. 获取资料网址: https://blog.csdn.net/xts_huangxin/article/details/51494472 感谢原作者这里面按照自己的机器情况进行了学习模仿 ...
Bellman-ford算法的学习http://blog.csdn.net/niushuai666/article/details/6791765
http://blog.csdn.net/niushuai666/article/details/6791765
matplotlib绘图基本用法-转自（http://blog.csdn.net/mao19931004/article/details/51915016）
本文转载自http://blog.csdn.net/mao19931004/article/details/51915016 <!DOCTYPE html PUBLIC "-//W3C ...
golang语言并发与并行——goroutine和channel的详细理解（一）转发自https://blog.csdn.net/skh2015java/article/details/60330785
如果不是我对真正并行的线程的追求,就不会认识到Go有多么的迷人. Go语言从语言层面上就支持了并发,这与其他语言大不一样,不像以前我们要用Thread库来新建线程,还要用线程安全的队列库来共享数据. ...
Win32消息循环机制等【转载】http://blog.csdn.net/u013777351/article/details/49522219
Dos的过程驱动与Windows的事件驱动在讲本程序的消息循环之前,我想先谈一下Dos与Windows驱动机制的区别: DOS程序主要使用顺序的,过程驱动的程序设计方法.顺序的,过程驱动的程序有一个 ...
http://blog.csdn.net/u014595019/article/details/52805444
http://blog.csdn.net/u014595019/article/details/52805444 tensorflow笔记系列: (一) tensorflow笔记:流程,概念和简单代码 ...
http://blog.csdn.net/v_july_v/article/details/6543438
本文转载至: http://blog.csdn.net/v_july_v/article/details/6543438 算法程序员面试.算法研究.编程艺术.红黑树.数据挖掘5大经典原创系列集锦与总 ...

随机推荐

socket短连接、长连接
通常短连接是这样:连接->传输数据->关闭连接那什么是长连接?一般长连接相对短连接而言的,长连接在传输结束后不关闭连接,而不断的发送包保持连接等待处理下一个数据包. 一般长连接用于少数cl ...
从理论到实践，全方位认识DNS（实践篇）
在理论篇中,我们基本了解了DNS的整个协议原理,但是可能还会有着下面的疑问: 为什么我想申请的域名都没了? DNS 域名还要备案,这是为什么啊? 如何将刚申请的域名绑定到自己的网站呢? 怎么才能看到那 ...
Python3基础（六）深入list列表
正如Python FAQ1附录中说的, Python中任何值都是一个对象,所以任何类型(int.str.list-)都是一个类.而类就必然有它的方法或属性,我们要记下这么多类的所有方法显然是不可能的, ...
ViewPager中View的复用
代码例如以下: public class MyViewPagerAdapter extends PagerAdapter { //显示的数据 private List<DataBean> ...
LeetCode 648. Replace Words (单词替换)
题目标签:HashMap 题目给了我们一个array 的 root, 让我们把sentence 里面得每一个word 去掉它得 successor. 把每一个root 存入hash set,然后遍历s ...
关于C语言指针的一些新认识（1）
Technorati 标签: 指针,数组,汇编,C语言前言指针是C语言的精华,但我对它一直有种敬而远之的感觉,因为一个不小心就可能让你的程序陷入莫名其妙的麻烦之中.所以,在处理字符串时,我总是能用 ...
bootstrap table 显示连续序号，分页有效
参考:http://blog.csdn.net/nazhidao/article/details/51647799 第一种,通过index+1可以简单实现,但是,翻页后又重新从第一个开始 { fiel ...
BMP图片的解析,关于压缩方式
在做一个显示bmp图片到lcd屏的时候,发现有些bmp图显示不对. 同样是16bit bmp却有差异. 就查了一下格式. bmp文件格式位图文件的组成结构名称符号位图文件头(bitmap-fi ...
怎么看待MYSQL的性能
MySQL在单实例性能方面和Oracle相比还有一些差距,我们通过规范和技术手段来降低这些性能差距带来的问题. 首先,大量甚至海量数据的增删改.查询.聚合查询的性能还有待提高.为了规避这些问题,我们在 ...
【POJ 2777】 Count Color
[题目链接] http://poj.org/problem?id=2777 [算法] 线段树 [代码] #include <algorithm> #include <bitset&g ...

Cesium学习笔记（四）Camera ----http://blog.csdn.net/hobhunter/article/details/74909641

setView

Cartesian 方式

Rectangle 方式

flyTo

lookAt

官网Demo笔记

Cesium学习笔记（四）Camera ----http://blog.csdn.net/hobhunter/article/details/74909641的更多相关文章

随机推荐

热门专题