Vite Vue3 TypeScript Cesium.js集成项目模板

查看node.js版本

Node.js版本 >= 12

# 查看Node版本：
node -v

使用 Vite 快速搭建

使用npm创建

npm init vite@latest

使用yarn创建

yarn create vite

使用pnpm创建

pnpm create vite

填写项目名称

选择vue

选择typescript

创建完成vite+ts环境

安装依赖包运行代码

浏览器运行出现此页面，查看调试代码无报错
安装cesium

pnpm i cesium
pnpm i vite-plugin-cesium -D
pnpm i --save-dev @types/cesium

如遇到上方报错使用命令安装rollup

pnpm install rollup

安装成功后在vite.config.ts引入如下代码

import { defineConfig } from "vite";
  import vue from "@vitejs/plugin-vue";
  import cesium from "vite-plugin-cesium"; // 引入cesium插件


  export default defineConfig({
    plugins: [
      vue(),
      cesium(), // 使用cesium插件
    ],
  });

清楚所有样式和案例代码
设置style.css内容为

*{
  margin: 0;/*所有元素margin 0px */
  padding: 0;/* 所有元素padding 0px */
}

设置app.vue内容

<script setup lang="ts">
  import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld/>
</template>

<style scoped>
</style>

设置HelloWorld.vue内容

<script setup lang="ts">
import { onMounted } from "vue"
import * as Cesium from 'cesium';

onMounted(() => {
  const Viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
    
  })
  Viewer._cesiumWidget._creditContainer.style.display = "none"//取消版权信息
})

</script>

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

<style scoped>
#cesiumContainer {
  width: 100vw; /*屏幕宽度*/
  height: 100vh; /*屏幕高度*/
  overflow: hidden; /*隐藏滚动条*/ 
}
</style>

运行最终效果如下图

源码下载地址： https://download.csdn.net/download/u012425087/87640176