一、视图(Viewer)
viewer是cesium的核心类,是一切的开端。通过new Cesium.Viewer(container, options)
来创建一个Viewer对象,而通过这个 Viewer对象,可以添加图层、实体、相机控制等,以及设置一些全局属性。在日常Cesium开发中,几乎都是围绕着这个对象展开的。
创建Viewer实例
let viewer = new Cesium.Viewer(container, options);
container:必需,表示视图器容器元素的ID字符串或HTML元素。
options:可选,用于定制Viewer对象。有许多选项可以配置。更多选项请查看
示例代码:
// 实例化地球
let viewerOption = {
geocoder: false, // 地名查找,默认true
homeButton: false, // 主页按钮,默认true
sceneModePicker: false, //二三维切换按钮
baseLayerPicker: false, // 地图切换控件(底图以及地形图)是否显示,默认显示true
navigationHelpButton: false, // 问号图标,导航帮助按钮,显示默认的地图控制帮助
// animation: false, // 动画控制,默认true .
shouldAnimate: true, // 是否显示动画控制,默认true .
shadows: true, // 阴影
timeline: true, // 时间轴,默认true .
CreditsDisplay: false, // 展示数据版权属性
fullscreenButton: false, // 全屏按钮,默认显示true
infoBox: true, // 点击要素之后显示的信息,默认true
selectionIndicator: true, // 选中元素显示,默认true
contextOptions: {
webgl: {
preserveDrawingBuffer: true //cesium状态下允许canvas转图片convertToImage
}
}
};
let viewer = new Cesium.Viewer("cesiumContainer", viewerOption);
主要方法(更多内容请查看):
destroy(): 销毁viewer。
extend(): 扩展viewer。
resize(): 调整viewer的大小。
zoomTo(): 缩放视图以查看给定的对象。
flyTo(): 飞向一个对象。
forceResize(): 强制重新调整viewer的大小。
例如:
viewer.destroy(); //销毁viewer
二、场景 (Scene)
通过Scene对象可以在视图下添加图形(primitive)、添加场景特效(如后处理特效postProcessStage)、添加场景事件或控制视图下的星空skyBox、大气层skyAtmosphere、地球globe、太阳sun和月亮moon。
示例代码:
添加场景特效之雪天效果
viewer.scene.postProcessStages.add(this.snowStage);
/**
* 雪天效果
*/
SnowEffect() {
var viewer = this.viewer;
let option = {
snowSize: 0.01, // 雪花大小,值越大雪花越大 最好不要超过0.01
snowSpeed: 60 // 雪花速度,值越大雪花越慢
};
this.snowStage = new Cesium.PostProcessStage({
name: "czm_snow",
fragmentShader: this.Snow(),
uniforms: {
snowSize: () => {
return option.snowSize;
},
snowSpeed: () => {
return option.snowSpeed;
}
}
});
viewer.scene.postProcessStages.add(this.snowStage);
},
/**
* 雪天效果着色器
* @returns {string} 着色器
*/
Snow() {
return "uniform sampler2D colorTexture;\n\
varying vec2 v_textureCoordinates;\n\
\n\
uniform float snowSpeed;\n\
uniform float snowSize;\n\
float snow(vec2 uv,float scale){\n\
float time = czm_frameNumber / snowSpeed;\n\
float w=smoothstep(1.,0.,-uv.y*(scale/10.));\n\
if(w<.1)return 0.;\n\
uv+=time/scale;\n\
uv.y+=time*2./scale;\n\
uv.x+=sin(uv.y+time*.5)/scale;\n\
uv*=scale;\n\
vec2 s=floor(uv),f=fract(uv),p;\n\
float k=3.,d;\n\
p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;\n\
d=length(p);\n\
k=min(d,k);\n\
k=smoothstep(0.,k,sin(f.x+f.y)*snowSize);\n\
return k*w;\n\
}\n\
\n\
void main(){\n\
vec2 resolution = czm_viewport.zw;\n\
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
vec3 finalColor=vec3(0);\n\
float c = 0.0;\n\
c+=snow(uv,30.)*.0;\n\
c+=snow(uv,20.)*.0;\n\
c+=snow(uv,15.)*.0;\n\
c+=snow(uv,10.);\n\
c+=snow(uv,8.);\n\
c+=snow(uv,6.);\n\
c+=snow(uv,5.);\n\
finalColor=(vec3(c));\n\
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);\n\
\n\
}\n\
";
},
三、相机(Camera)
Camera表示观察场景的视角。通过操作摄像机,可以控制视图的位置、方向和角度。
更多请查看
示例代码:
//设置相机位置
viewer.camera.setView({
// 定义相机的目标位置(笛卡尔坐标)
destination: {
x: -2349785.4381783823,
y: 4596905.031779513,
z: 3743318.751622788
},
// 定义相机的方向和角度
orientation: {
// 相机的偏转角度(heading表示从正北开始逆时针旋转的角度。其数值是以弧度表示的。一个值为0的heading通常表示正北)
// 偏航角(飞机向左飞还是向右飞)
heading: 0.1015029573852555,
// 相机的上下倾斜角度(一个负的pitch值表示相机是向下倾斜的。)
// 俯仰角(飞机向上抬头或是向下低头)
pitch: -0.3482370478292893,
// 相机围绕其查看方向(或称前进方向)的旋转角度(当roll值为π/2或90°(转换为弧度)时,相机将绕其前进方向旋转90度。这意味着相机的“顶部”现在指向其右侧。)
// 翻滚角(飞机沿前进方向轴顺时针翻转为正角度)
roll: 0.00005029594533212389
}
});
Cesium中的orientation属性用于设定各种对象的方向,不仅仅是相机的方向,还包括其他实体如模型的方向。下面以飞机模型为例,当设定飞机模型的orientation,实际上是在定义飞机的朝向和姿态。想象自己在驾驶这架飞机,那么飞机的前进方向和你的视线方向在概念上是相似的,那么你的眼就相当于相机 。
飞机水平飞行:
飞机向左偏:
飞机抬头:
飞机顺时针旋转:
相机操作:
1,飞行(fly): 使相机飞向某个指定的位置。这通常是一个平滑的过渡,不仅仅是简单的位置变换。
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
lon,
lat,
height
),
duration: duration //持续时间
});
2,缩放(zoom): 使相机向前或向后移动,从而使视野放大或缩小。
// 缩小
viewer.camera.zoomOut(500); // 向后移动500米
// 放大
viewer.camera.zoomIn(500); // 向前移动500米
3,移动(move): 沿着地平面或其他方向移动相机,而不改变它的高度或朝向。
// 向右移动
viewer.camera.moveRight(500); // 地面上向右移动500米
4,视角(look): 改变相机的朝向,但不改变其位置。通常用于围绕某个点旋转。
viewer.camera.look(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(-10)); // 向下看10度
5,平面扭转(twist): 改变相机的roll值,使相机绕其前进方向轴旋转。
viewer.camera.twistRight(Cesium.Math.toRadians(10)); // 顺时针扭转10度
6,3D旋转(rotate): 在三维空间中旋转相机,可以是任意方向的旋转。
viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(10)); // 绕Z轴旋转10度
7,用于将相机视角锁定到目标位置(lookAt): 设置相机的位置和朝向,以使其始终面向某个特定的点或对象。
var targetPosition = Cesium.Cartesian3.fromDegrees(103.851959, 1.290270);
viewer.camera.lookAt(targetPosition, new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_FOUR, 1500.0));
8,将地球或场景缩放到该实体的视图范围内(viewer.zoomTo()): 调整相机的位置和朝向,以最佳地查看某个特定的实体或对象
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(103.851959, 1.290270),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED
}
});
viewer.zoomTo(entity);