1.Vue3+Cesium+Typescript

在Vue3中使用Cesium和TypeScript，你可以遵循以下步骤：

1. 安装Vue3和Cesium：

npm install vue@next cesium

2. 配置TypeScript。如果你还没有配置过，可以使用官方的Vue CLI来设置TypeScript：

npm install -g @vue/cli
vue create my-vue3-cesium-app
cd my-vue3-cesium-app
vue add typescript

3. 在vue.config.js中配置Cesium：

const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  configureWebpack: {
    amd: {
      toUrlUndefined: true
    },
    plugins: [
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('')
      }),
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    },
    resolve: {
      alias: {
        'cesium': path.resolve(__dirname, 'node_modules/cesium/Source')
      }
    }
  }
};

4. 在shims-vue.d.ts中添加Cesium类型定义：

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}
 
declare module 'cesium/Cesium';

5. 在你的Vue组件中使用Cesium：

<template>
  <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import Cesium from 'cesium';
 
export default defineComponent({
  name: 'CesiumViewer',
  setup() {
    const cesiumContainer = ref<HTMLElement | null>(null);
 
    onMounted(() => {
      if (cesiumContainer.value) {
        const viewer = new Cesium.Viewer(cesiumContainer.value);
      }
    });
 
    return { cesiumContainer };
  }
});
</script>

确保你的Vue项目已经正确安装了Cesium，并且在你的HTML文件或Vue组件的模板中有一个元素用于Cesium的初始化。在上面的例子中，我们使用了cesiumContainer作为Viewer的挂载点。当组件挂载（mounted）后，我们创建一个新的Cesium.Viewer实例并将其绑定到该元素上。