cesium.js入门基础教程一（视图与场景）

运行环境搭建

下载cesium.js
从https://cesium.com/downloads/下载cesium.js:

在vsCode中建立index.html和index.js，并在index.html中引入index.js：
index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>titleset</title>
    <script src="../cesium_Build/Cesium/Cesium.js"></script>
    <style>
      @import url(./Cesium-1.112/Build/Cesium/Widgets/widgets.css);

      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #getposition {
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 600px;
        background-color: gray;
      }
    </style>
  </head>

  <body>
    <div id="cesiumContainer"></div>

    <script src="./Cesium-1.112/Build/Cesium/Cesium.js"></script>
    <script src="./index.js"></script>
  </body>
</html>

index.html

const viewer = new Cesium.Viewer("cesiumContainer", {
  scene3DOnly: true,
  selectionIndicator: false,
  baseLayerPicker: false,
  terrain: Cesium.Terrain.fromWorldTerrain({
    requestWaterMask: true,
    requestVertexNormals: true,
    requestWaterMask: true,
  }),
});

查看效果
通过vsCode的liveServer插件来开启一个5500的端口，查看网页实际效果：

可以看到，地球顺利的出现了
运行环境就搭建完成了！

视图和场景：

视图Viewer

在Cesium中Viewer是一切的开端，通过new Cesium.Viewer(container,options)来创建一个Viewer对象，该对象容纳了当前画布中所有的属性，在Viewer对象上的所有操作，画布中的地球则会同步响应。

1. 初始化一个视图

在搭建 运行环境搭建 章节中，我们新建了index.js并写入了相关内容，该文件包含了Cesium场景的初始化代码:

const viewer = new Cesium.Viewer("cesiumContainer");

cesiumContainer是页面中某个div的id,初始化的Cesium场景就在这个div中；
上边的代码就用于初始化Cesium的场景;
Cesium.Viewer方法传入的就是节点的id值，返回一个viewer的实例，后续对于Cesium场景的所有操作都是通过该对象实例来完成的
该对象实例及方法非常重要，查阅官方文档发现Cesium.Viewer的描述为new Cesium.Viewer(container,options),可以发现该方法含有一个可选的初始化参数:options

实际上index.js的完整代码如下：

const viewer = new Cesium.Viewer("cesiumContainer", {
  scene3DOnly: true,
  selectionIndicator: false,
  baseLayerPicker: false,
  terrain: Cesium.Terrain.fromWorldTerrain({
    requestWaterMask: true,
    requestVertexNormals: true,
    requestWaterMask: true,
  }),
});

可以看到包含了options的相关配置项

2. Viewer的属性：
Viewer对象主要包括如下属性：

camera：相机属性，主要用于控制视角
camera（非属性）：widgets并非Viewer对象的属性，在这里特指所有控件
- animation：动画控件；
- baseLayerPicker：影像图层选择器；
- fullscreenButton：全屏按钮；
- geocoder：查找位置；
- homeButton：返回视角到初始位置；
- navigationHelpButton：帮助按钮；
- timeline：时间轴；
- vrButton ：VR按钮。
imageryLayers：影像图层集合
terrainProvider：地形提供者
entities：实体集合
dataSources：矢量数据集合
Event（非属性）：Event并非Viewer对象的属性，在这里特指所有事件：
- screenSpaceEventHandler：屏幕操作事件；
- selectedEntityChanged：选取实体事件；
- trackedEntityChanged：追踪实体事件。
scene：场景，scene是Viewer对象的属性，但它也是Cesium中的一个关键的对象，用于添加图形（primitive）、添加场景特效和添加场景事件，scene对象将在之后介绍。

场景Scene

Scene为Cesium视图下的3D图形对象和状态的容器，Scene对象并不是显式创建的，而是由Viewer或CesiumWidget初始化视图时隐式创建的，通过Scene对象可以在视图下添加图形（primitive）、添加场景特效（如后处理特效postProcessStage）、添加场景事件或控制视图下的星空skyBox、大气层skyAtmosphere、地球globe、太阳sun和月亮moon。

相机Camera

在Cesium中通过相机Camera来描述和操作场景的视角，使用相机Camera操作场景的视角分为如下几类：

飞行 fly: flyHome、flyTo和flyToBoundingSphere,与fly有关方法的特点就是改变相机视角时会伴随飞行动画；这类方法一定会改变相机的位置，但是不一定改变相机的朝向;
缩放 zoom:zoomIn和zoomOut,与zoom有关的方法类似于使用鼠标滚轮来操作场景进行缩小或放大;这类方法不会改变相机的朝向，只会改变相机的位置；
移动 move: moveBackward、moveDown、moveForward、moveLeft、moveRight和moveUp，与 move有关的方法就是在前后左右上下这六个方向上移动相机，这类方法不会改变相机的朝向，只会改变相机的位置；
视角 look: lookDown、lookLeft、lookRight和lookUp,与look有关的方法就是在相机位置不变的情况下，调整相机镜头的上下左右四个方向朝向，这类方法不会改变相机的位置，只会改变相机的朝向;
扭转 twist: twistLeft和twistRight，与twist有关的方法就是在相机位置不变的情况下，调整相机视角左(顺时针)/右(逆时针)扭转，这类方法不会改变相机的位置，只会改变相机的朝向。
旋转 rotate：rotateDown、rotateLeft、rotateRight、rotateUp，与rotate有关的方法会根据提供的角度旋转相机视角，这类方法会改变相机的位置，也会改变相机的朝向
其他操作相机的方法：
- setView 直接将相机视角定位到某个位置
- lookAt 直接将相机视角定位到某个位置，但是会锁定相机视角

方向 orientation

对于flyTo和setView方法，可以为其指定一个orientation对象，这个参数控制着镜头的方向，orientation对象有三个主要参数roll、pitch和heading:

属性	图例
`roll`：滚转角，围绕X轴旋转
`pitch`：仰俯角，围绕y轴旋转
`heading`：航向角，围绕z轴旋转

这是一个`orientation`对象的示例代码：

orientation: {
  heading: 0,
  pitch : Cesium.Math.toRadians(-60.0), // 角度转换
  roll: 0,
}

飞行 fly

飞行到初始位置flyHome

flyHome用于将相机视角飞行到初始位置（默认相机视角:Cesium.Camera.DEFAULT_VIEW_RECTANGLE）,flyHome方法还可以为其指定一个duration参数，表示飞行的时间长短，单位为秒，若不指定该参数，Cesium会根据当前相机视角和目标相机视角的距离来计算duration参数:

参数名称	类型	描述
`duration`	`NUmber`	飞行的过程时间，单位为秒

flyHome的使用方法如下:

viewer.camera.flyHome();

飞行到指定位置flyTo

flyTo是最为常用的一种相机操作方法，用于将相机视角飞行到指定位置，他有如下常用参数:

参数名称	类型	描述
`destination`	`Cartesian3`或`Rectangle`	指定相机视角的目的地
`orientation`	`Object`	指定相机视角的方向，默认为垂直视角
`duration`	`Number`	指定相机视角飞往目的地的时间长度，单位为秒
`maximumHeight`	`Number`	指定相机视角在飞行途中的最大高度

flyTo的使用方法如下：

viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(116.391311, 39.90616, 1500), // 经度，纬度，高度
  orientation: {
    heading: 0,
    pitch: Cesium.Math.toRadians(-60.0), // 角度转换
    roll: 0,
  },
  duration: 3,
  maximumHeight: 20000
})

飞行到包围球flyToBoundingSphere

flyToBoundingSphere用于将相机飞行到一个包围球boundingSphere的位置，boundingSphere是一个对象，包含包围球中心点的坐标和包围球半径两个参数:

参数名称	类型	默认值	描述
`center`	`Cartesian3`	`Cartesian3.ZERO`	包围球的中心坐标
`radius`	`Number`	`0.0`	包围球的半径

flyToBoundingSphere需要提供两个参数，一个是上面提到的，boundingSphere对象，表示飞行的目的地，另一个参数是飞行参数，类似于flyTo的参数，其实flyToBoundingSphere和flyTo十分相似，只是表达目的地的方式不同，在flyToBoundingSphere中是通过boundingSphere对象来表达目的地，而 flyTo中使用的是 destination表达目的地;
flyToBoundingSphere的使用方法如下：

let center = new Cesium.Cartesian3(x, y, z) // 笛卡尔空间直角坐标系x，y，z
let sphere = new Cesium.BoundingSphere(center, r) // r为radius半径
viewer.camera.flyToBoundingSphere(sphere)

flyToBoundingSphere常用于将相机视角飞行到某个局部坐标(位置)，如将相机位置飞行到BIM模型中的某个结构.

缩放zoom

缩放zoom用于相机视角的缩放，相关方法共有两个：

zoomIn：视角缩小，类似与鼠标滚轮向前滚动
zoomOut 视角放大，类似于鼠标滚轮向后滚动

这两个方法都可以传递一个参数amount,表示缩放的距离:

参数名称	类型	默认值	描述
`amount`	`Number`	`defaultZoomAmount`,即1000000.0	缩放的距离

缩放zoom的使用方法如下:

const zoomInAmount = 1000000
const zoomOutAmount = 2000000
viewer.camera.zoomIn(zoomInAmount)
viewer.camera.zoomOut(zoomOutAmount)

移动 move

移动move用于在前后左右上下这六个方向上移动相机，相关方法共有六个:

moveForward：向前移动相机;
moveBackward：向后移动相机;
moveLeft：向左移动相机;
moveRight：向右移动相机;
moveUp：向上移动相机;
moveDown：向下移动相机;

上述操作的示意图如下，可以将相机想象成一个正方体，正方体有六个面，以上的每种操作都是朝着其中某个面的方向上进行移动：

这类方法不会改变相机的朝向，只会改变相机的位置，这6个方法都可以传递一个参数amount，表示移动的距离:

参数名称	类型	默认值	描述
`amount`	`Number`	`defaultMoveAmount`,即1000000.0	移动的距离

移动move的使用方法如下:

const moveAmount = 100000
viewer.camera.moveForward(moveAmount)
viewer.camera.moveBackward(moveAmount)
viewer.camera.moveLeft(moveAmount)
viewer.camera.moveRight(moveAmount)
viewer.camera.moveUp(moveAmount)
viewer.camera.moveDown(moveAmount)

视角 look

视角look用于在相机位置不变的情况下，调整相机镜头的上下左右四个方向朝向，相关方法共有4个：

lookUp 向上调整相机视角;
lookDown 向下调整相机视角
lookLeft 向左调整相机视角
lookRight 向右调整相机视角

这类方法不会改变相机的位置，只会改变相机的朝向，这4个方法都可以传递一个参数amount,表示视角调整的弧度:

参数名称	类型	默认值	描述
`amount`	`Number`	`defaultLookAmount`,即Math.PI / 60.0，转换为角度为3°	视角调整的弧度

由于参数amount需要指定一个弧度值，可以使用Cesium.Math.toRadians()方法将角度转化成弧度，则默认值defaultLookAmount等价于Cesium.Math.toRadians(3)，视角look的使用方法如下：

const lookRadians = Cesium.Math.toRadians(10) // 10°
viewer.camera.lookUp(lookRadians)
viewer.camera.lookDown(lookRadians)
viewer.camera.lookLeft(lookRadians)
viewer.camera.lookRight(lookRadians)

扭转 twist

扭转twist用于在相机位置不变的情况下，调整相机视角向左（逆时针）或向右(顺时针)扭转，相关方法共有两个：

twistLeft 向左扭转相机视角
twistRight 向右扭转相机视角

这类方法不会改变相机的位置，只会改变相机的朝向，这两个方法都可以传递一个参数amount,表示视角调整的弧度:

参数名称	类型	默认值	描述
`amount`	`Number`	`defaultLookAmount`,即Math.PI / 60.0，转换为角度为3°	扭转的距离

与视角look类似，参数amount也是一个弧度值，可以使用Cesium.Math.toRadians()方法将角度转换为弧度，扭转twist的使用方法如下：

const twistAmount = Cesium.Math.toRadians(10) // 10°
viewer.camera.twistLeft(twistAmount)
viewer.camera.twistRight(twistAmount)

旋转 rotate

旋转rotate用于根据提供的角度参数旋转相机视角，相关方法共有4个：

rotateUp 根据角度参数向上旋转相机视角
rotateDown 根据角度参数向下旋转相机视角
rotateLeft 根据角度参数向左旋转相机视角
rotateRight 根据角度参数向右旋转相机视角

上述操作的示意图如下:

这类方法会改变相机的位置，也会改变相机的朝向，这4个方法都可以传递一个参数angle,表示视角旋转的角度:

参数名称	类型	默认值	描述
`angle`	`Number`	`defaultRotateAmount`,即Math.PI / 3600.0	旋转的角度

参数angle需要指定一个弧度值，，可以使用Cesium.Math.toRadians()方法将角度转换为弧度，旋转 rotate 的使用方法如下：

const rotateAngle = Cesium.Math.toRadians(10) // 10°
viewer.camera.rotateUp(rotateAngle)
viewer.camera.rotateDown(rotateAngle)
viewer.camera.rotateLeft(rotateAngle)
viewer.camera.rotateRight(rotateAngle)

其他操作相机的方法

视角设置 setView

setView用于将相机视角直接定位到某个位置，该方法不会有相机视角移动的动作，该方法的常用参数如下：

参数名称	类型	描述
`destination`	`Cartesian3`或`Rectangle`	相机视角定位的位置
`orientation`	`Object`	相机视角的方向

其中destination可以指定两种类型的值：

Cartesian3：笛卡尔空间直角坐标系，在Cesium中表示为Cesium.Cartesian3.fromDegrees(lon, lat, hgt)，其中lon,lat,hgt分别表示经度、纬度、和高度，使用方法如下：

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.435314, 39.960521, 15000.0), // 设置位置，北京的坐标
  orientation: {
    heading: Cesium.Math.toRadians(20.0),
    pitch: Cesium.Math.toRadians(-90.0),
    roll: 0
  }
})

Rectangle：矩形坐标范围，则Cesium中表示为Cesium.Rectangle.fromDegrees(west, south, east, north)，其中west、south、east和north分别表示西经，南纬，东经，北纬，如下图所示

使用方法如下：

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.435314, 39.960521, 15000.0), // 设置位置，北京的坐标
  orientation: {
    heading: Cesium.Math.toRadians(20.0),
    pitch: Cesium.Math.toRadians(-90.0),
    roll: 0
  }
})

视角锁定lookAt

lookAt用于将相机视角锁定到目标位置，该方法不会有相机视角移动的动作，该方法的常用参数如下：

参数名称	类型	描述
`target`	`Cartesian3`	相机视角锁定的位置
`offset`	`Cartesian3`或`HeadingPitchRange`	相机视角的方向或者偏移

lookAt的使用方法如下：

// 1. offset为Cartesian3
const center = Cesium.Cartesian3.fromDegrees(116.391311, 39.90616, 1500) // 北京天安门
viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, -4790.0, 3900.0))

// 2. offset为HeadingPitchRange
const center = Cesium.Cartesian3.fromDegrees(114.296870, 30.546479, 100) // 武汉黄鹤楼
const heading = Cesium.Math.toRadians(50.0)
const pitch = Cesium.Math.toRadians(-70.0)
const range = 180.0
viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))

使用lookAt后，相视角将锁定到目标位置，若要接触相机视角锁定可执行如下代码：

// 解除相机视角锁定
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)

posted @ 2023-12-12 10:41 sy0313 阅读(1331) 评论(0) 编辑收藏举报

刷新页面返回顶部

cesium.js入门基础教程一 （视图与场景）