Cesium相机系统
在二维GIS中移动视域或者进行空间漫游,只需要设置视域范围中心点的的经纬度和图层等级,可以理解为只需确定视点位置即可,不存在视线方向问题。但在三维GIS中不仅需要确定视点位置,还需要确定视线方向,如果目标物与视线方向相反,那么在视域中则看不到目标物。Cesium通过相机控制场景中的视域,旋转、缩放、平移等操作都可控制相机移动。当用户拖动地球移动时,其实是地球不动,相机在移动,这种相对运动产生场景移动的效果。Cesium具有默认的鼠标和触摸事件处理程序与摄像头交互,默认的相机操作有
- 左键单击并拖动——移动整个地图;
- 右键单击并拖动——放大和缩小相机;
- 中轮滚动——放大和缩小相机;
- 中间点击并拖动——围绕地球表面的点旋转相机
Cesium中相机的方向和位置
- Cesium中orientation函数用于设定方向,不仅是相机的方向,还包括模型的方向
- Cesium中position函数用于设定的相机位置
- Cesium将Orientation定义为Object,它通常包含heading、pitch、roll,这三者并不是必选参数,不设置具体参数则自动设为相应默认值,可通过HeadingPitchRoll API查看相应属性
- Cesium中相机方向orientation设定原理与右手笛卡尔坐标系原理相同,以正北为参照,即X轴所在方向
- Heading:默认方向为正北,正角度为向东旋转,即水平旋转,也叫偏航角
- pitch:默认旋转角度为-90,即朝向地面,正角度为平面之上,负角度为平面之下,即上下旋转,也叫俯仰角
- roll:默认旋转角度为0,左右旋转,正角度向右旋转,负角度向左旋转,也叫翻滚角
这里通过setView方法给相机设定方位:
viewer.camera.setView(
{ destination:position,//用于设定相机的目的地
orientation:{//orientation 用于设定相机视口的方向
heading:Cesium.Math.toRadians(0),//heading 控制视口方向的水平旋转,也就是沿着Y轴旋转,当数值为0,代表正北方向
pitch:Cesium.Math.toRadians(-90),//pitch控制视口上下旋转,即沿着X轴进行旋转,当数值为-90,则是俯视朝向地面
roll:0,//roll 控制视口的翻转角度,即沿着Z轴进行旋转,数值为0表示不翻转
}
}
)
几种操作相机的方法
- setView
setView方法通过定义相机飞行目的点三维坐标(经纬度和大地高)和视线方向,将视角直接切换到所设定的视域范围内,没有空中飞行的过程,适用于快速切换视角
viewer.camera.setView(
{ destination:position,//用于设定相机的目的地
orientation:{//orientation 用于设定相机视口的方向
heading:Cesium.Math.toRadians(0),//heading 控制视口方向的水平旋转,也就是沿着Y轴旋转,当数值为0,代表正北方向
pitch:Cesium.Math.toRadians(-90),//pitch控制视口上下旋转,即沿着X轴进行旋转,当数值为-90,则是俯视朝向地面
roll:0,//roll 控制视口的翻转角度,即沿着Z轴进行旋转,数值为0表示不翻转
}
}
)
- viewBoundingSphere
viewBoundingSphere相机运动效果与setView类似,都是视域切换到目标点,没有视域飞行的过程,但是其设定方法与setView有所不同。viewBoundingSphere函数必须设定模型的外接圆,viewBoundingSphere这种方法适用于室内浏览,因为室内空间较小,相机移动的幅度不易控制。viewBoundingSphere将相机固定在定点,视角绕点旋转360°,实现定点环游。BoundingSphere简单说就是物体的外接球。viewBoundingSphere默认将视点置于外接球求新,可以设置偏移。
//添加飞机模型
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll(-90,0,0))//设置模型朝向 headingPitchRollQuaternion方法,第一个参数设置位置,第二个参数是旋转角度信息
viewer.entities.add({
position:position, //此属性用于设置模型位置
orientation:orientation,
model:{//model用于存储模型各种信息
uri:'SampleData/models/CesiumAir/Cesium_Air.glb',//模型链接
minimumPixelSize:100,//当前属性用于设置模型缩放最小情况下的大小
maximumScale:10000,//模型缩放最大的比例
show:true//设置模型显示
}
})
viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0))//viewBoundingSphere 第一个参数是位置,第二个参数是相机朝向 /BoundingSphere第一个参数是距离,第二个参数是和物体的距离
- flyTo
setView是快速切换视角,flyTo则具有空中飞行逐步切换视域的效果,可以设置飞行时间,相机则根据当前视点位置和目标视点位置自动设定飞行速度和飞行路线,实现巡游式视域切换。
viewer.camera.flyTo({
destination:position,
orientation:{//orientation 用于设定相机视口的方向
heading:Cesium.Math.toRadians(0),//heading 控制视口方向的水平旋转,也就是沿着Y轴旋转,当数值为0,代表正北方向
pitch:Cesium.Math.toRadians(-90),//pitch控制视口上下旋转,即沿着X轴进行旋转,当数值为-90,则是俯视朝向地面
roll:0,//roll 控制视口的翻转角度,即沿着Z轴进行旋转,数值为0表示不翻转
},
duration:5,//duration属性可以设置相机飞行时间 5s
complete:function(){
//到达位置后执行的回调函数
},
cancel:function(){
//如果取消飞行则会调用此函数
},
pitchAdjustHeight:-90,//如果摄像机飞越高于该值,则调整俯仰角度,并将地球保持在视域中
maximumHeight:5000,//相机最大飞行高度
flyOverLongitude:100,//相机飞向目的地的过程中,必须强制经过东经100°子午线
)
- lookAt
lookAt函数也是将视角固定在所设置的目的点上,用户可以通过鼠标任意旋转视角方向,但是不会改变其位置。
const center=Cesium.Cartesian3.fromDegrees(116.39,39.91)//设置相机目的地位置,只需要设置经度纬度
const heading=Cesium.Math.toRadians(50)
const pitch=Cesium.Math.toRadians(-90)
const range=2500//设置相机距离目标点的高度
viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading,pitch,range))