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. **进入项目目录**

   ```bashcd cesium-map-project```

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

     ```bashnpm 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 Tokenconst 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. **启动开发服务器**
   - 在项目目录中运行以下命令启动开发服务器：
   

  ```bashnpm run serve```

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