vue3 +ts 使用CesiumJS

以下是使用Vue3 + TypeScript和Cesium.js创建地球场景的示例：

首先，确保你已经安装了Vue CLI和Node.js。然后，按照以下步骤进行操作：

1. 创建一个新的Vue项目：

vue create cesium-app

2. 进入项目目录：

cd cesium-app

3. 安装Cesium.js和相关依赖：

npm install cesium
npm install @types/cesium

4. 在`src`目录下创建一个新的组件文件，例如`CesiumMap.vue`，并添加以下代码：

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import * as Cesium from 'cesium';

export default defineComponent({
  mounted() {
    const viewer = new Cesium.Viewer('cesiumContainer');
    // 在这里可以添加更多的Cesium.js代码来自定义地球场景
  },
});
</script>

<style scoped>
#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

5. 在`src`目录下的`main.ts`文件中导入并使用`CesiumMap`组件：

import { createApp } from 'vue';
import App from './App.vue';
import CesiumMap from './CesiumMap.vue';

const app = createApp(App);
app.component('CesiumMap', CesiumMap);
app.mount('#app');

6. 在`src`目录下的`App.vue`文件中使用`CesiumMap`组件：

<template>
  <div id="app">
    <CesiumMap />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<style>
#app {
  width: 100%;
  height: 100%;
}
</style>

7. 运行项目：

npm run serve

现在，你应该可以在浏览器中看到一个基本的Cesium.js地球场景。