Cesium 环境搭建

一、前提条件
1. **安装 Node.js**
   - 访问 [Node.js 官方网站](https://nodejs.org/)，下载并安装适合你操作系统的版本。Node.js 用于运行本地开发服务器和安装依赖。
2. **安装 Vue CLI**
   - Vue CLI 是一个用于快速开发 Vue.js 项目的工具。在终端中运行以下命令安装 Vue CLI：

     npm install -g @vue/cli

### 二、创建 Vue 项目
1. **创建一个新的 Vue 项目**
   - 在终端中运行以下命令创建一个新的 Vue 项目：

          vue create cesium-map-project
     

   - 按照提示进行操作，选择默认配置即可。
2. **进入项目目录**

   ```bash
   cd cesium-map-project
   ```

### 三、安装 Cesium
1. **安装 Cesium**
   - 在项目目录中运行以下命令安装 Cesium：

     ```bash
     npm install cesium
     ```

### 四、修改代码
1. **修改 `src/App.vue` 文件**
   - 将 `src/App.vue` 文件的内容替换为以下代码：
     

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

     <script setup lang="ts">
     // AccessTokens需要到官网获取，详细看问题注意点
     import * as Cesium from "cesium";
     import "cesium/Build/Cesium/Widgets/widgets.css";
     import { onMounted } from "vue";

     Cesium.Ion.defaultAccessToken = '你的AccessTokens'; // 替换为你的 Access Token

     const init = () => {
       const viewer = new Cesium.Viewer("cesiumContainer", {
         homeButton: true, // 首页位置，点击之后将视图跳转到默认视角
         sceneModePicker: true, // 是否显示投影方式控件
         baseLayerPicker: true, // 是否显示图层选择控件
         navigationHelpButton: true, // 是否显示帮助信息控件
         geocoder: false, // 是否显示地名查找控件
         animation: false, // 是否显示动画控件
         timeline: false, // 是否显示时间线控件
         fullscreenButton: false, // 视察全屏按钮
         vrButton: false, // 是否启用虚拟现实 (VR) 模式
         shadows: true, // 影子
         infoBox: false, // 是否显示点击要素之后显示的信息
       });
     };

     onMounted(() => {
       init();
     });
     </script>

     <style>
     #cesiumContainer {
       width: 100%;
       height: 100vh; /* 设置容器高度为视口高度 */
     }
     </style>
     ```
   - **注意**：将 `'你的AccessTokens'` 替换为你从 [Cesium Ion](https://cesium.com/ion/) 获取的 Access Token。

### 五、运行项目
1. **启动开发服务器**
   - 在项目目录中运行以下命令启动开发服务器：
   

  ```bash
     npm run serve
     ```

2. **访问地图**
   - 打开浏览器，访问 [http://localhost:8080](http://localhost:8080)，就能看到一个三维地球视图。