【记录】vite+vue3+ts 搭建Cesium环境

Cesium 安装

安装 cesium

npm install -s cesium@latest

安装插件 vite-plugin-cesium

npm install cesium vite-plugin-cesium vite -D

vite.config.ts 文件配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import cesium from "vite-plugin-cesium";
import { fileURLToPath, URL } from "node:url";

export default defineConfig(({ command, mode }) => {
    if (command === "serve") {
        // 本地配置
        return {
          resolve: {
            alias: {
              "@": fileURLToPath(new URL("./src", import.meta.url)),
            },
          },
          // base: "./", // 加载base之后cesium会有路径问题
          server: {
            port: 8888,
            open: false, // 配置自动启动浏览器
          },
          plugins: [vue(), cesium()],
        };
    } else {
        // 打包配置
        return {
            ...
        }
    }
})

Cesium 全局环境配置

类型声明：新建 src\type\win-cesium.d.ts

declare namespace globalThis {
  // window 全局挂载 cesium 和 viewer
  import("cesium");
  import * as Cesium from "cesium";

  interface Window {
    Cesium?: Cesium;
    viewer?: Cesium.Viewer;
  }
}

组件示例：viewer.vue

<template>
  <div class="cesium-view">
    <div id="cesiumViewer"></div>
  </div>
</template>

<script setup lang="ts">
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import { onMounted } from "vue";

Cesium.Ion.defaultAccessToken = "cesium token";
// 需写在onMounted模块里面
onMounted(() => {
  window.Cesium = Cesium;
  window.viewer = new Cesium.Viewer("cesiumViewer", {
    infoBox: false, // 禁用沙箱，解决控制台报错, 右上角鼠标点击后信息展示框
    shadows: true, //确定阴影是否由太阳投射形成。
    sceneModePicker: false, //获取场景模式拾取器(SceneModePicker)对象,右上角2D和3D之间的切换
    geocoder: true, // 位置查找工具

    homeButton: true, // * 右上角地图恢复到初始页面按钮
    scene3DOnly: true, // * 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    useDefaultRenderLoop: true, // * 控制渲染循环?：设置为false地球无法加载，为什么？
    showRenderLoopErrors: true, // * HTML面板中显示错误信息
    useBrowserRecommendedResolution: true, // * 如果为true，则以浏览器建议的分辨率渲染并忽略window.devicePixelRatio
    automaticallyTrackDataSourceClocks: false, // * 自动追踪最近添加的数据源的时钟设置
    orderIndependentTranslucency: true, // * 如果为true并且配置支持它，则使用顺序无关的半透明性
    requestRenderMode: true, // * 在指定情况下进行渲染,提高性能

    animation: false, // * 左下角圆盘 速度控制器
    shouldAnimate: false, // * 当动画控件出现，用来控制是否通过旋转控件，旋转场景
    baseLayerPicker: true, // * 右上角图层选择器
    fullscreenButton: false, // * 右下角全屏按钮
    vrButton: false, // * 右下角vr按钮
    selectionIndicator: false, // * 点击后地图上显示的选择控件
    timeline: false, // * 页面下方的时间条
    navigationHelpButton: false, // * 右上角帮助按钮
    navigationInstructionsInitiallyVisible: false, // * 是否展开帮助
    projectionPicker: false, // * 透视投影和正投影之间切换

    terrain: Cesium.Terrain.fromWorldTerrain(), // 地形数据
  });

  // 开启地形检测，若不开启地形检测，导致3dtiles模型始终悬浮在地形之上，在调整数字地球视角的时候，会导致3dtiles模型的位置有偏移
  window.viewer.scene.globe.depthTestAgainstTerrain = true;
});
</script>

<style scoped lang="less">
.cesium-view {
  width: 100%;
  height: 100%;
  z-index: 20;

  #cesiumViewer {
    width: 100%;
    height: 100%;
    background-color: aquamarine;
  }
}
</style>

<style lang="less">
// 隐藏版权信息
.cesium-viewer .cesium-widget-credits {
  display: none !important;
}
</style>