cesium camera相机系统

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

概括

Cesium中相机就是人的视角，相当于人的眼睛，通过控制相机来控制场景中的视域，旋转、缩放、平移等操作。了解了cesium中常用的坐标，以及camera常用的方法，就可以想去哪里去哪里。本文章是学习笔记，用于记录。

---

一、cesium常见的坐标系

Cesium中常见的坐标系：笛卡尔空间直角坐标系（Cartesian3）、平面坐标系（Cartesian2）、WGS84弧度坐标系（Cartographic）。

1、笛卡尔坐标系（Cartesian3）
笛卡尔空间直角坐标又称为世界坐标，Cesium中用Cartesian3变量表示，可通过new Cesium.Cartesian3(x, y, z)创建，主要是用来做空间位置的变化如平移、旋转和缩放等等，它的坐标原点在椭球的中心。

2、平面坐标系（Cartesian2）
平面坐标系也就是平面直角坐标系，也称为屏幕坐标，是一个二维笛卡尔坐标系，与Cartesian3相比少了一个z的分量，new Cesium.Cartesian2(x, y)。Cartesian2经常用来描述屏幕坐标系，比如鼠标在电脑屏幕上的点击位置，返回的就是Cartesian2，返回了鼠标点击位置的xy像素点分量。

3、WGS84弧度坐标系（Cartographic）
Cesium中的地理坐标单位默认是弧度制，用Cartographic变量表示，可通过new Cesium.Cartographic(longitude, latitude, height)创建，其中这里的参数是用弧度表示的经纬度，即经度和纬度。弧度即角度对应弧长是半径的倍数。
角度转弧度 π/180×角度
弧度变角度 180/π×弧度

二、几种坐标系的转换方法

1.经纬度坐标转笛卡尔坐标系

// 方法1：直接转换 lng=116.39366974823713, lat=39.9060622299375, height=31805.253837354827
 var cartesian1 = Cesium.Cartesian3.fromDegrees(lng, lat, height); 
 //cartesian1.x=-2188808.843329037,cartesian1.y=4410550.298005498
 //cartesian1.z=4090394.086155276

// 方法2：借助ellipsoid对象，先转换成弧度再转换 
var cartographic = Cesium.Cartographic.fromDegrees(lng, lat, height); //单位：度，度，米 
var cartesian3 = ellipsoid.cartographicToCartesian(cartographic); 

2.笛卡尔坐标系转经纬度

var cartographic = Cesium.Cartographic.fromCartesian(cartesian3); 
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude); 
var height = cartographic.height; 

3.弧度和经纬度互转

经纬度转弧度：

Cesium.Math.toRadians(degrees)  

弧度转经纬度：

Cesium.Math.toDegrees(radians)  

4.屏幕坐标和世界坐标互转

屏幕转世界坐标：

// 2.二维屏幕坐标转为三维笛卡尔空间直角坐标（世界坐标） 
var cartesian3 = scene.globe.pick(viewer.camera.getPickRay(windowPostion), scene );   

世界坐标转屏幕坐标：

// 三维笛卡尔空间直角坐标（世界坐标）转为二维屏幕坐标 
// 结果是Cartesian2对象，取出X,Y即为屏幕坐标。  
windowPostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian3);   

---

三、camera常用方法

1、Cesium.setView方法： 设置视图位置

 // Cesium.setView
const position = Cesium.Cartesian3.fromDegrees(114.21, 30.55, 600)
this.viewer.camera.setView({
    destination: position, // 相机位置
    orientation: {
        heading: Cesium.Math.toRadians(0), // 水平旋转  -正北方向
        pitch: Cesium.Math.toRadians(-90), // 上下旋转  --俯视朝向
        roll: 0 // 视口翻滚角度
    } 

主要参数如下：
heading: 偏航角，默认方向为正北（0°），正角度为向东旋转，即左右摇头。
pitch: 俯仰角，默认角度为-90°，即朝向地面，0°为平视，正角度为仰视，负角度为俯视，即抬头低头。
roll: 翻转角，默认角度为0°，正角度向右旋转，负角度向左旋转，即左右歪头

2、Cesium.flyHome方法： 将相机飞到主视图
默认位置 Cesium.Camera.DEFAULT_VIEW_RECTANGLE
矩形框即视角范围

 // Cesium.flyHome
// 默认矩形框设置为亚洲
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(51.096847,9.98438,150.589429,70.671623);
// 将相机飞到主视图,即默认矩形框区域。
let duration = 2;
viewer.camera.flyHome(duration)

Name	Type	Description
duration	Number	可选飞行持续时间（以秒为单位）。如果省略，Cesium会尝试根据航班要行驶的距离来计算理想持续时间

3、Cesium.flyTo方法
flyTo (options)
将相机从当前位置移动到新位置。

// 1. Fly to a position with a top-down view
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});

// 2. Fly to a Rectangle with a top-down view
viewer.camera.flyTo({
    destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});

// 3. Fly to a position with an orientation using unit vectors.
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
        up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
    }
});

// 4. Fly to a position with an orientation using heading, pitch and roll.
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        heading : Cesium.Math.toRadians(175.0),
        pitch : Cesium.Math.toRadians(-35.0),
        roll : 0.0
    }
});

4、Cesium.lookAt方法
场景视角锁定，拖动视图主要以小球视角进行环绕查看

const center =  Cesium.Cartesian3.fromDegrees(114.21, 30.55)  // 目标位置
const heading =   Cesium.Math.toRadians(50)// 水平旋转  -正北方向
const pitch =  Cesium.Math.toRadians(-90) // 上下旋转  --俯视朝向
const range = 2000 // 目标点高度
this.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))

4、Cesium.viewBoundingSphere方法

将相机飞到当前视图包含提供的边界球的位置。
设置相机，以便当前视图包含提供的边界球。
偏移量是在以边界球体中心为中心的局部东西向上参考系中的航向/俯仰/范围。
航向角和俯仰角在当地东西北上参考系中定义。航向是从 y 轴到 x 轴增加的角度。
俯仰是从 xy 平面的旋转。
正俯仰角在平面下方。
负俯仰角在平面上方。
范围是到中心的距离。
如果范围为零，则将计算范围以使整个边界球体可见。
在 2D 中，必须有自上而下的视图。摄像机将放置在目标上方向下看。
目标上方的高度将是范围，航向将根据偏移量确定，如果无法根据偏移量确定航向，则航向将为北。

const position = Cesium.Cartesian3.fromDegrees(114.21, 30.55, 1500)  // 目标位置
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90, 0, 0)) // 方向
    this.viewer.entities.add({
        position,
        orientation,
        model: {
            uri: window.CESIUM_BASE_URL + '/SampleData/models/CesiumAir/Cesium_Air.glb', // 模型路径
            minimumPixelSize: 100, // 最小缩放大小
            maximumScale: 10000, // 缩放最大比例
            show: true
        }
    })
    this.viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position, 20), new Cesium.HeadingPitchRange(0, 0, 0))