CesiumJS学习记录

运行环境&技术栈：
node 18.16.0
VSCode
Vite + Vue3 + TypeScript
cesium 1.108

一、CesiumJS引入

npm install cesium@1.108

yarn add cesium@1.108

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

declare global {
    interface Window {
      CESIUM_BASE_URL: string
    }
  }
createApp(App).mount('#app')

配置CESIUM_BASE_URL

CesiumJS 需要在服务器上托管一些静态文件，例如 Web Worker 和 SVG 图标。配置模块打包程序复制以下4个目录，并将它们作为静态文件提供:

• node_modules/cesium/Build/Cesium/Workers
• node_modules/cesium/Build/Cesium/ThirdParty
• node_modules/cesium/Build/Cesium/Assets
• node_modules/cesium/Build/Cesium/Widgets

在导入 CesiumJS 之前，必须设置全局变量window.CESIUM_BASE_URL。它必须指向提供上述四个目录的 URL。 例如，目录为 Assets/Images/cesium_credit.png 的图像，其路径带有http://localhost:8080/static/Cesium/Assets/Images/cesium_credit.png 的前缀static/Cesium/,那么对应的全局变量需要设置如下：

window.CESIUM_BASE_URL = '/static/Cesium/';

二、使用CesiumJS创建基础的三维地球

注册CesiumJS，获取专属Token

<template> 
    <div id="cesiumContainer" ref="viewerDivRef"></div> 
</template> 
<script setup lang="ts"> 
    import { onMounted, ref } from 'vue' 
    import { TileMapServiceImageryProvider, Viewer, buildModuleUrl } from 'cesium' 
    import 'cesium/Build/CesiumUnminified/Widgets/widgets.css' 
    
    const viewerDivRef = ref<HTMLDivElement>() 
    window.CESIUM_BASE_URL = 'node_modules/cesium/Build/CesiumUnminified/' 
    Ion.defaultAccessToken = 'Cesium注册的Token';
    onMounted(() => { 
      new Viewer(viewerDivRef.value as HTMLElement, {
          imageryProvider:newTileMapServiceImageryProvider({ 
              url: 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII', 
          }) 
      }) 
    }) 
</script> 
<style scoped> 
#cesiumContainer { width: 100%; height: 100%; } 
</style> 

html, body {
  padding: 0;
  margin: 0;
}

#app {
  height: 100vh;
  width: 100vw;
}

三、Viewer配置项

// 创建图层
const viewer = new Cesium.Viewer("cesiumContainer", {
		animation: false, //是否创建动画小器件，左下角仪表
		fullscreenButton: false, // 全屏组件
		vrButton: false, // VR模式
		timeline: false, //是否显示时间轴
		geocoder: false, //地理编码（搜索）组件，右上角查询按钮
		homeButton: true, //首页，点击之后将视图跳转到默认视角
		infoBox: false, //是否显示信息框
		sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
		scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
		selectionIndicator: false, //是否显示选取指示器组件
		navigationHelpButton: false, // 帮助提示，如何操作数字地球。
		// 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
		navigationInstructionsInitiallyVisible: false,
		shouldAnimate: true, // 是否显示动画
		shadows: true, //是否显示背影
		baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。将图层选择的控件关掉，才能添加其他影像数据
		// baseLayer://地图数据
});
//去除版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";