Cesium
Intro
- Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。
- Cesium 使用WebGL 来进行硬件加速图形,使用时不需要任何插件支持,但是浏览器必须支持WebGL。
- Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。
目录结构
- Source/: Cesium应用程序代码及数据
- ThirdParty/:外部依赖库,不同于Cesium的第三方库
- LICENSE.md:Cesium 的 License 介绍
- index.html:Web首页,需要按照Cesium要求定义页面,同时添加Cesium依赖库
- server.js:基于node.js的web服务应用
界面介绍
界面控件
隐藏控件
js代码控制
javascript
var viewer = new Cesium.Viewer('cesiumContainer',{
geocoder: false, // 是否显示地名查找控件
homeButton: false, // 是否显示主页按钮
sceneModePicker: false, // 是否显示场景按钮
baseLayerPicker: false,// 是否显示图层选择控件
navigationHelpButton: false, // 导航帮助按钮
animation: false, // 是否创建动画小器件,左下角仪表
timeline: false, // 是否显示时间线控件
creditContainer: "credit",
fullscreenButton: false, // 是否全屏按钮
vrButton: false,
// skyBox : new Cesium.SkyBox({
// sources : {
// positiveX : 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
// negativeX : 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
// positiveY : 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
// negativeY : 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
// positiveZ : 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
// negativeZ : 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
// }
// })
});
关闭版权信息
javascript
// 去除cesium标识
mapViewer._cesiumWidget._creditContainer.style.display = 'none'
显示帧速(FPS)
javascript
viewer.scene.debugShowFramesPerSecond = true;
css控制
css
/* 不占据空间,无法点击 */
.cesium-viewer-toolbar, /* 右上角按钮组 */
.cesium-viewer-animationContainer, /* 左下角动画控件 */
.cesium-viewer-timelineContainer, /* 时间线 */
.cesium-viewer-bottom /* logo信息 */
{
display: none;
}
.cesium-viewer-fullscreenContainer /* 全屏按钮 */
{ position: absolute; top: -999em; }
绘制形状
通过Entity添加形状
添加立方体
javascript
var viewer = new Cesium.Viewer('cesiumContainer');
var redBox = viewer.entities.add({
name : 'Red box with black outline',
position: Cesium.Cartesian3.fromDegrees(119.040216, 33.58167, 50.9),
box : {
dimensions : new Cesium.Cartesian3(4000.0, 3000.0, 5000.0),
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.BLACK
}
});
viewer.zoomTo(viewer.entities);
通过czml添加
czml是一种JSON格式的字符串,
用于描述与时间有关的动画场景,czml包含点、线、地标、模型和其他的一些元素,
并指明了这些元素如何随时间而变化
javascript
// czml加载/JSON字符串
const czml = [
{
id: 'document',
name: 'box',
version: '1.0'
},
{
id: 'shape2',
name: 'Red box with black outline',
position: {
cartographicDegrees: [119.040216, 33.58167, 50.9]
},
box: {
dimensions: {
cartesian: [4000.0, 3000.0, 5000.0]
},
material: {
solidColor: {
color: {
rgba: [255, 0, 0, 128]
}
}
},
outline: true,
outlineColor: {
rgba: [0, 0, 0, 255]
}
}
}
]
const dataSourcePromise = Cesium.CzmlDataSource.load(czml)
mapViewer.dataSources.add(dataSourcePromise)
mapViewer.zoomTo(dataSourcePromise)
效果
形状类型
实体实例将多种形式的可视化聚集到单个高级对象中。可以手动创建它们并将其添加到 Viewer#entities或由数据源,例如 CzmlDataSource和 GeoJsonDataSource。
Name | Type | Description |
---|---|---|
options | Object | optionalObject with the following properties: |
Name | Type | Description |
id | String | 可选此对象的唯一标识符。如果未提供,则将生成GUID。 |
name | String | 可选显示给用户的可读名称。它不必是唯一的。 |
availability | TimeIntervalCollection | 可选与此对象相关联的可用性(如果有)。 |
show | Boolean | 可选一个布尔值,指示是否显示实体及其子代。 |
description | Property | 可选一个字符串属性,用于为此实体指定HTML描述。 |
position | PositionProperty | 可选指定实体位置的属性。 |
orientation | Property | 可选指定实体方向的属性。 |
viewFrom | Property | 可选用于查看该对象的建议初始偏移量。 |
parent | Entity | 可选与该实体关联的父实体。 |
billboard | BillboardGraphics | 可选与该实体相关联的广告牌。 |
box | BoxGraphics | 可选与该实体关联的框。 |
corridor | CorridorGraphics | 可选与该实体关联的走廊。 |
cylinder | CylinderGraphics | 可选与该实体关联的圆柱体。 |
ellipse | EllipseGraphics | 可选与该实体关联的椭圆。 |
ellipsoid | EllipsoidGraphics | 可选与该实体关联的椭球。 |
label | LabelGraphics | 可选与该实体关联的options.label。 |
model | ModelGraphics | 可选与该实体关联的模型。 |
path | PathGraphics | 可选与该实体关联的路径。 |
plane | PlaneGraphics | 可选与该实体关联的平面。 |
point | PointGraphics | 可选与该实体关联的点。 |
polygon | PolygonGraphics | 可选与该实体关联的多边形。 |
polyline | PolylineGraphics | 可选与该实体关联的折线。 |
properties | PropertyBag | 可选与该实体关联的任意属性。 |
polylineVolume | PolylineVolumeGraphics | 可选与该实体相关联的polylineVolume。 |
rectangle | RectangleGraphics | 可选与该实体关联的矩形。 |
wall | WallGraphics | 可选与该实体关联的墙。 |
Imagery
关键元素:图层(Imagery)
支持的图层格式:
- wms
- TMS
- WMTS (with time dynamic imagery)
- ArcGIS
- Bing Maps
- Google Earth
- Mapbox
- OpenStreetMap
Terrain
地形(Terrain)
Cesium支持流式的、可视化的全球高程投影地形地势、水形数据,包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样,Cesium引擎会从一个服务器上请求流式地形数据,仅请求那些基于当前相机能看到的需要绘制的图层上的数据。
Cesium官方提供了一些地形数据集的例子,以及如何配置这些参数。
- ArcticDEM : 高投影的arctic terrain
- PAMAP Terrain : 高投影的Pennsylvania terrain
- Terrain display options : 一些地形数据配置和格式
- Terrain exaggeration : 是地形间的高度差异更加的优雅艺术
支持的地形数据格式
- Quantized-mesh, Cesium团队自己开源的一种格式
- Heightmap
- Google Earth Enterprise
Scene
视窗(Scene)
基础的Cesium类型
- Cartesian3 : 一个三维笛卡尔坐标——当它被用作相对于地球中心的位置时,使用地球固定框架(ECEF)。
- Cartographic : 由经度、纬度(弧度)和WGS84椭球面高度确定的位置。
- HeadingPitchRoll : 在东北向上的框架中关于局部轴的旋转(弧度)。航向是围绕负Z轴的旋转。俯仰是围绕负Y轴的旋转。滚动是关于正X轴的旋转。
- Quaternion :以4D坐标表示的3D旋转。