Cesium基础配置(一)

注意事项：

vite兼容的node版本在12及其以上。

1.在相应的文件夹目录下搭建vite

npm init vite@latest

2.输入项目名：

3.选择框架：vue+TypeScript

4.搭建完成

5.WebStrom打开npm install

6.启动项目

7.引入cesium插件

npm i cesium vite-plugin-cesium vite -D

8.vite.config.js文件配置cesium插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from "vite-plugin-cesium";
​
export default defineConfig({
  plugins: [vue(),cesium()],
})

9.根组件全局导入

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import {onMounted} from "vue";
import * as Cesium from "cesium";
/**
 * id为cesiumContainer的div需要挂载后再执行Cesium的代码
 */
onMounted(()=>{
  const viewer = new Cesium.Viewer('cesiumContainer',{
      infoBox:false,
  });
// }
</script>

<style scoped>
#cesiumContainer{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>

10.具体效果