查看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