# vite_vue3_cesium

**Repository Path**: code-tj/vite_vue3_cesium

## Basic Information

- **Project Name**: vite_vue3_cesium
- **Description**: vite搭建vue3 cesium开发环境，踩坑
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://www.code-tj.cn/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-12-26
- **Last Updated**: 2023-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#  vite_vue3_cesium
### 安装vite环境

```
npm create vite@latest
```
Project name:vite_vue3_cesium<br>

Vanilla // 纯html js <br>
Vue     // vue3<br>
React   // react<br>
Preact<br>
Lit<br>
Svelte<br>
Others<br>

Select a framework: » Vue<br>
Select a variant: » JavaScript<br>


Done. Now run:<br>
```
cd vite_vue3_cesium
npm install
npm run dev
```

 Local:   http://localhost:5173/ <br>
  ➜  Network: use --host to expose <br>
  ➜  press h to show help <br>

启动vite_vue3<br>

### 安装cesium
Install with NPM<br>
```
npm install cesium
```
### 建立环境变量 
### 开发环境 
.env.development<br>
```
VITE_APP_CESIUM = "./public/Cesium/"
```
### 生产环境 
.env.production<br>
```
VITE_APP_CESIUM = "./Cesium/"
```

\node_modules\cesium\Build\cesium<br>
复制Cesium到public下<br>


src下 新建js目录<br>
建立initCesium.js

```
//指定拷贝到根目录下的Cesium
window.CESIUM_BASE_URL = './Cesium/';

import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";

export const initCesium = () => {
    //填写官网注册的ion，否则也会找不到东西
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    // Initialize the Cesium Viewer in the HTML element with the "cesiumContainer" ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });
    // Add Cesium OSM Buildings, a global 3D buildings layer.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
        orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-15.0),
        }
    });
}
```

components组件目录下建立<br>
CesiumDom.vue<br>

```
<script setup>
import { ref, onMounted } from "vue";
import { initCesium } from "../js/initCesium";

onMounted(() => {
  initCesium();
});

</script>

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

<style scoped>
#cesiumContainer {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
```

### 修改App.vue

```
<script setup>
import CesiumDom from "./components/CesiumDom.vue";
</script>
<template>
  <CesiumDom />
</template>
```



### 修改运行dev、build
### 修改 package.json
```
"scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
    "preview": "vite preview"
}
```


### 打包
vite.config.js
```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: './'//修改打包路径相对路径,这样可以放到网站子目录
})
```