CesiumJS初始化

Cesium 初始化很简单，配置 viewer 初始化参数（不配置则为默认参数），然后实例化 Viewer 方法，传入需要挂载的容器 id（或者容器元素）以及初始化参数即可。

下面为代码示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
  </head>

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

    <script type="module" src="./main.ts"></script>
  </body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// main.ts
import '@/css/common.css'
import initCesium from '@/libs/base/initCesium'

init()

/**
 * 函数初始化
 */
function init() {
  getViewer()
}

/**
 * 初始化 Cesium ，获取实例化 viewer 对象，并挂载到 cesiumContainer 上
 * @returns {Cesium.Viewer} 实例化得到的 viewer
 */
function getViewer(): Cesium.Viewer {
  const cesiumContainer = document.querySelector('#cesiumContainer') as HTMLDivElement
  const viewer = initCesium(cesiumContainer)
  return viewer
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// src/libs/base/initCesium
import { Viewer, Ion } from 'cesium'

/**
 * 自定义的默认 Cesium.Viewer 初始化参数对象
 */
const viewerOptions: Viewer.ConstructorOptions = {
  animation: false, // 动画部件
  baseLayerPicker: false, // 基础图层部件
  fullscreenButton: false, // 全屏按钮部件
  geocoder: false, // 位置搜索部件
  homeButton: false, // home 按钮
  infoBox: false, // 消息框部件
  sceneModePicker: false, // 二三维切换部件
  selectionIndicator: false,
  timeline: false, // 时间轴部件
  navigationHelpButton: false, // 导航帮助按钮
  navigationInstructionsInitiallyVisible: false, // 导航说明显示
  scene3DOnly: true, // 当设置为 true 时，每个几何图形实例将仅以 3D 形式呈现，以节省 GPU 内存。
  automaticallyTrackDataSourceClocks: false, // 设置成 true，使用公共 clock 对象，设置 false，所有功能使用独立 clock 对象
}

/**
 * Cesium Ion 申请的 key ，不需要 Cesium 的 asset 的话可以不配置这一项。
 */
const defaultToken: string = `您的token`

/**
 * Cesium.Viewer 初始化
 * @param container 实例化 Cesium.Viewer 的容器
 * @param [options] Cesium.Viewer 初始化参数
 * @param [token] Cesium 授权 Token
 * @returns {Viewer} 实例化得到的 viewer
 */
export default function initCesium(
  container: string | Element,
  options: Viewer.ConstructorOptions = {},
  token?: string
): Viewer {
  Ion.defaultAccessToken = token ? token : defaultToken
  const resultOptions = Object.assign(viewerOptions, options)
  return new Viewer(container, resultOptions)
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* src/css/common.css */
#cesiumContainer {
  /* 公共cesiumContainer样式 */
  height: 100vh;
  width: 100vw;

  .cesium-widget-credits {
    /* 隐藏左下角cesium版权声明 */
    display: none;
  }
}

显示效果如下：

CesiumJS初始化

相关文章：