Cesium在vue3中的安装、使用

1.cesium插件引入，vite-plugin-cesium 是一个专门为 Vite 构建工具定制的插件，用于在 Vite 项目中轻松使用 Cesium 库。它简化了在 Vite 项目中集成 Cesium 的过程，并提供了一些额外的功能和配置选项。而直接安装 Cesium 库，你需要手动配置 Vite 项目以确保正确引入和使用 Cesium。这可能涉及到配置模块加载器、处理依赖关系、解决版本冲突等问题。相比之下，使用 vite-plugin-cesium 插件可以让这些步骤更加简单和方便，所以要使用vite构建项目。

npm i cesium vite-plugin-cesium vite -D

2.配置vite.config.js

import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [
    cesium()
    ]
})

3.在组件中,cesium挂载前，容器需要已经渲染挂载，放在生命周期onMounted中。viewer中的配置项

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted ref} from 'vue'
const viewer = ref()
onMounted(() => {
  viewer.value = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, // 禁用沙箱，解决控制台报错
    navigationHelpButton: false,
  })
  viewer.value.camera.setView({
    // 设置相机位置，经度，纬度，高度
    destination: Cesium.Cartesian3.fromDegrees(118.03, 24.485, 10000),
    orientation: {
      // 初始视角
      heading: Cesium.Math.toRadians(0), // 偏航角，单位弧度
      pitch: Cesium.Math.toRadians(-45), // 仰俯角，单位弧度
      roll: Cesium.Math.toRadians(0)  // 翻滚角，单位弧度
    }
  })
})

　　viewer.value.cesiumWidget.creditContainer.style.display = "none"  // 去除cesium ion logo

</script>

viewer中的可配置项,可参考官网：https://www.cesium.com/

偏航角、仰俯角、翻滚角理解参考：https://www.pianshen.com/article/59611147769/

 

geocoder: 位置查找工具
    baseLayerPicker: 图层选择器（地形影像服务）
    homeButton: 视角返回初始位置
    fullscreenButton: 全屏
    animation: 左下角仪表盘（动画器件）
    timeline: 底部时间线
    sceneModePicker: 选择视角的模式（球体、平铺、斜视平铺）
    navigationHelpButton: 导航帮助按钮
    infoBox: 信息框控件
    navigationInstructionsInitiallyVisible: 导航说明初始可见
    shouldAnimate: 动画
    requestWaterMask: 请求水面罩
    requestVertexNormals: 请求顶点法线

代码地址：https://gitee.com/yuexiayunsheng/vue3learn/commit/c275c354d68a4bf63415bab88be6e83597b8a957