# cesium

**Repository Path**: rain_sky/cesium

## Basic Information

- **Project Name**: cesium
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-09
- **Last Updated**: 2024-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 01 搭建Vite+Vue3+Cesium开发环境
### 第一步:使用vite创建一个vue项目
```bash
1.yarn create vite cesiumapp --template vue
2.cd cesiumapp
3.yarn install
4.yarn dev
```
### 第二步:安装Cesium相关插件
```yarn add cesium vite-plugin-cesium vite -D```
### 第三步:在vite.config.js中引入插件
```ts
import cesium from 'vite-plugin-cesium'; // 引入插件
export default defineConfig({
  plugins: [vue(),cesium()]
})
```
### 第四步：引入文件
- 将安装的Cesium的build目录下的四个文件复制到public文件夹下
- 将Widgets目录再复制一份到src目录下
### 第五步:在App.vue中创建cesium容器并创建实例
```vue
<template>
  <div id="cesiumContainer"></div>
</template>


<script setup>
import * as Cesium from "cesium"; //引入cesium
import { onMounted } from "vue";
import './Widgets/widgets.css'

// Cesium 静态资源路径
window.CESIUM_BASE_URL = '/'

onMounted(() => {
  //初始化cesium实例
  const viewer = new Cesium.Viewer("cesiumContainer");
});
</script>


<style>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

```