1. Создайте проект Vite
npm create vite@latest
2. Установите плагин cesium: vite-plugin-cesium
npm i cesium vite-plugin-cesium vite -D
3. Настройте vite.config.js
для импорта цезия из 'vite-plugin-cesium';
экспортируйте по умолчанию defineConfig({ plugins: [vue(),cesium()]
})
4. Очистить стили в style.css
5. Настройте App.vue
, чтобы очистить все, что не нужно, и установите стиль, чтобы сделать его полноэкранным.
<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>
текущий результат