G

Q

and

M

E

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 閱讀(2280) 評論(0) 收藏舉報

刷新頁面返回頂部

cesium.js入門基礎教程一 （視圖與場景）