参考文章:Cesium+Vue3+vite环境搭建详细教程_vite+vue cesium geoserver-CSDN博客
环境依赖
1.nodejs
查看node版本
node -v
v18.16.1
查看npm版本
npm -v
9.5.1
项目创建
使用Vite创建项目
npm create vite@latest cesium-vite
设置项目名称:cesium-vite
设置项目框架:vue
设置语言:TypeScript
配置项目依赖
切换到项目中
cd cesium-vite
安装相关依赖
npm install
引入Cesium插件
npm i cesium vite-plugin-cesium vite -D
查看Cesium版本
npm list cesium
├── cesium@1.115.0
设置相关配置
配置Vite.config
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium(),],
})
清空style.css中的样式
删除/src/style.css文件中的所有内容
配置src/app.vue
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(() => {
const viewer = new Cesium.Viewer('cesiumContainer');
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
html,body,#cesiumContainer{
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
overflow:
hidden;
}
</style>
注意:在app.vue
中设置了Cesium铺满网页的样式后,需要确保src/style.css
中没有对应样式才可以生效
运行系统
npm install
npm run dev
系统效果
其他
报错:unlocker.js:71 Blocked script execution in 'about:blank' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
在app.vue
中Cesium.Viewer
中设置infobox:false
即可。代码如下:
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
onMounted(() => {
const viewer = new Cesium.Viewer('cesiumContainer',{
infoBox: false,
});
});