cesium之相机camera

cesium提供三种方式对camera进行操作：setView,flyto,lookAt。
一.setView
setView有两种计算视角方式。
1.Cartesian3方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.camera.setView({
            destination : Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0),     
            orientation: {       //设置视角
                heading : Cesium.Math.toRadians(20.0), // east, default value is 0.0 (north)左右摆头
                pitch : Cesium.Math.toRadians(-90.0),    // default value (looking down)上下抬头 -90俯视 0平视 90仰视(默认俯视)
                roll : 0.0                             // default value
            }
        });
    </script>
</body>
</html>

2.Rectangle方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.camera.setView({
            destination: Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0),//west, south, east, north
            orientation: {
                heading : Cesium.Math.toRadians(20.0), // 方向
                pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
                roll : 0
            } 
        });
    </script>
</body>
</html>

二.flyto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.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 () {
            // 到达位置后执行的回调函数
            },
            cancle:function () {
            // 如果取消飞行则会调用此函数
            },
            pitchAdjustHeight:-90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
            maximumHeight:5000, // 相机最大飞行高度
            flyOverLongitude:100, // 如果到达目的地有2种方式，设置具体值后会强制选择方向飞过这个经度(这个，很好用)
        });
    </script>
</body>
</html>

三.lookAt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        var center = Cesium.Cartesian3.fromDegrees(114.44455, 22.0444);//camera视野的中心点坐标
        var heading = Cesium.Math.toRadians(50.0);
        var pitch = Cesium.Math.toRadians(-20.0);
        var range = 5000.0;
        viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
    </script>
</body>
</html>