1.創(chuàng)建一個(gè)Vite項(xiàng)目
npm create vite@latest
2.安裝cesium插件：vite-plugin-cesium
npm i cesium vite-plugin-cesium vite -D
3、配置vite.config.js
import cesium from 'vite-plugin-cesium';
export default defineConfig({ plugins: [vue(),cesium()]
})
4、清空style.css中的樣式
5、配置App.vue
清空一切不需要的，設(shè)置樣式使得全屏
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld />
</template>
<style >
html,body,#app{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
</style>
6、配置HelloWorld.vue
?
<template>
<div id="cesiumContainer">
</div>
</template>
<script setup>
import {onMounted} from "vue";
import * as Cesium from 'cesium';
onMounted(()=>{
let viewer = new Cesium.Viewer("cesiumContainer",)
})
</script>
<style >
#cesiumContainer{
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
運(yùn)行效果
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-493583.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-493583.html
到了這里，關(guān)于vite+vue3+cesium環(huán)境搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
