在vite中有一个关于Cesium的插件:vite-plugin-cesium。下面介绍如何在项目中使用这个插件,插件的网址如下所示:https://github.com/nshen/vite-plugin-cesium,这个插件的官网中有如何使用的说明。
npm i cesium vite-plugin-cesium vite -D
安装好对应的依赖之后,找到项目的vite.config.js文件,进行大概如下的配置。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入Cesium插件
import cesium from 'vite-plugin-cesium';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium()]
})
然后在某一个vue文件中,进行配置。具体的vue代码如下所示。
<template>
<div style="width: 100%; height: 100%;">
<div id="cesiumContainer"></div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
const viewer = new Cesium.Viewer('cesiumContainer');
})
</script>
<style scoped>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>