Skip to content

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服务应用

界面介绍

界面控件

image.png

隐藏控件

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'
        //     }
        // })
    });
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'
    // 去除cesium标识
    mapViewer._cesiumWidget._creditContainer.style.display = 'none'

显示帧速(FPS)

javascript
viewer.scene.debugShowFramesPerSecond = true;
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;  }
      /* 不占据空间,无法点击 */
      .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);
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)
// 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)

效果
image.png

形状类型

实体实例将多种形式的可视化聚集到单个高级对象中。可以手动创建它们并将其添加到 Viewer#entities或由数据源,例如 CzmlDataSourceGeoJsonDataSource

NameTypeDescription
optionsObjectoptionalObject with the following properties:
NameTypeDescription
idString可选此对象的唯一标识符。如果未提供,则将生成GUID。
nameString可选显示给用户的可读名称。它不必是唯一的。
availabilityTimeIntervalCollection可选与此对象相关联的可用性(如果有)。
showBoolean可选一个布尔值,指示是否显示实体及其子代。
descriptionProperty可选一个字符串属性,用于为此实体指定HTML描述。
positionPositionProperty可选指定实体位置的属性。
orientationProperty可选指定实体方向的属性。
viewFromProperty可选用于查看该对象的建议初始偏移量。
parentEntity可选与该实体关联的父实体。
billboardBillboardGraphics可选与该实体相关联的广告牌。
boxBoxGraphics可选与该实体关联的框。
corridorCorridorGraphics可选与该实体关联的走廊。
cylinderCylinderGraphics可选与该实体关联的圆柱体。
ellipseEllipseGraphics可选与该实体关联的椭圆。
ellipsoidEllipsoidGraphics可选与该实体关联的椭球。
labelLabelGraphics可选与该实体关联的options.label。
modelModelGraphics可选与该实体关联的模型。
pathPathGraphics可选与该实体关联的路径。
planePlaneGraphics可选与该实体关联的平面。
pointPointGraphics可选与该实体关联的点。
polygonPolygonGraphics可选与该实体关联的多边形。
polylinePolylineGraphics可选与该实体关联的折线。
propertiesPropertyBag可选与该实体关联的任意属性。
polylineVolumePolylineVolumeGraphics可选与该实体相关联的polylineVolume。
rectangleRectangleGraphics可选与该实体关联的矩形。
wallWallGraphics可选与该实体关联的墙。

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旋转。