1、Cesium相机简介
(1) 在二维GIS中进行空间漫游,只需要确定视点位置即可,不存在视线方向的问题。但在三维GIS中不仅需要确定视点的位置,还需要确定视线方向,如果目标物和视线方向相反,那么在视域中则看不到目标物。
(2)Cesium通过相机来控制场景中的视域,旋转、缩放、平移等操作都可控制相机移动。Cesium具有默认的鼠标和触摸事件处理程序和摄像头交互,默认的相机操作是这样的:
左键单击并拖动——移动整个地图
右键单击并拖动——放大和缩小相机
中轮滚动——放大和缩小相机
中键点击并拖动——围绕地球表面的点旋转相机
2、相机的方向和位置
(1) Cesium中的相机位置通过position来确定,position指的是相机位置的三维1坐标(可以用经纬度和大地高表达)。这里用flyTo函数让相机飞到珠穆朗玛峰:
var position = Cesium.Cartesian3.fromDegrees(86.889, 27.991, 8000);
viewer.camera.flyTo({
destination: position,
});
(2) Cesium通过Orientation来确定相机的方向,其设定原理和右手笛卡尔坐标系原理相同,主要包括以下三个参数:
heading: 偏航角,默认方向为正北(0°),正角度为向东旋转,即左右摇头。
pitch: 俯仰角,默认角度为-90°,即朝向地面,0°为平视,正角度为仰视,负角度为俯视,即抬头低头。
roll: 翻转角,默认角度为0°,正角度向右旋转,负角度向左旋转,即左右歪头。
Cesium.Ion.defaultAccessToken = '输入你的token'
//创建世界地形
const viewer = new Cesium.Viewer('container', {
terrainProvider: Cesium.createWorldTerrain()
});
//设定位置为珠穆朗玛峰
var position = Cesium.Cartesian3.fromDegrees(86.889, 27.991, 4000);
//相机飞到珠穆朗玛峰
viewer.camera.flyTo({
destination: position,
orientation:{
heading:Cesium.Math.toRadians(0.0), //正北
pitch:Cesium.Math.toDegrees(0.0), //平视
roll: 0.0
}
});
3、相机系统分类与用法
针对不同的场景和开发需求,Cesium设定多种操作相机的方法:
1、setView
setView通过定义相机飞行目的点的三维坐标(经纬度和大地高)和视线方向,将视角直接切换到所设定的视域范围内,没有空中飞行的过程,适合快速切换视角
Cesium.Ion.defaultAccessToken = '输入你的token'
//创建世界地形
const viewer = new Cesium.Viewer('container', {
terrainProvider: Cesium.createWorldTerrain()
});
//设定位置为珠穆朗玛峰
var position = Cesium.Cartesian3.fromDegrees(86.889, 27.991, 4000);
//相机飞到珠穆朗玛峰
viewer.camera.setView({
destination: position,
orientation:{
heading:Cesium.Math.toRadians(0.0), //正北
pitch:Cesium.Math.toDegrees(0.0), //平视
roll: 0.0
}
});
2、flyTo
setView是快速切换视角,而flyTo则是有相机空中飞行的过程。可以设置飞行时间。
var position = Cesium.Cartesian3.fromDegrees(86.889, 27.991, 4000);
viewer.camera.flyTo({
destination: position,
orientation:{
heading:Cesium.Math.toRadians(0.0),
pitch:Cesium.Math.toDegrees(0.0),
roll: 0.0
},
duration: 5, //设置相机飞行持续的时间,默认值会根据距离进行计算
pitchAdjustHeight: -90, //如果摄像机飞越高度高于该值,则会调整俯仰角度,保证地球在视域中
flyOverLongitude:100, //相机飞向目的地的过程中,必须强制经过东经100°子午线
});
3、lookAt
lookAt函数是将视角固定在所设置的目的点上,用户可以通过鼠标任意旋转视角方向,但不会改变其位置。
var position = Cesium.Cartesian3.fromDegrees(86.889, 27.991, 10000);
var heading = Cesium.Math.toRadians(50.0);
var pitch = Cesium.Math.toRadians(-90.0);
var range = 50.0;
viewer.camera.lookAt(position,new Cesium.HeadingPitchRange(heading,pitch,range));
更多相机相关示例和用法请参考官方文档:https://cesium.com/learn/cesiumjs-learn/cesiumjs-camera/