cesium+vue3+TS+vite

cesium+vue3+TS+vite

在vue3+TS中也可以按照vue2的方法，直接在public中手动复制cesium中的文件在index.html中进行引入

下面介绍的是在vue3中利用vite的拷贝插件来进行引入cesium

1.npm下载对应的cesium版本和ts包

​npm install cesium @types/cesium --save-dev​

2.安装拷贝插件

​npm install rollup-plugin-copy -D​

3.配置vite中的拷贝文件的方法

export default defineConfig({
  plugins: [
	//.....
    copy({
      targets: [
        {
          src: 'node_modules/cesium/Build/Cesium/Assets/**/*',
          dest: 'public/libs/cesium/Assets'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/Widgets/**/*',
          dest: 'public/libs/cesium/Widgets'
        },
        {
          src: 'node_modules/cesium/Build/Cesium/Workers/**/*',
          dest: 'public/libs/cesium/Workers'
        }
      ],
      hook: 'buildStart' // 在构建开始时执行复制
    })
  ],
  build: {
    assetsDir: 'static', // 自定义资源目录[5](@ref)
    rollupOptions: {
      output: {
        assetFileNames: 'static/[name]-[hash][extname]' // 资源命名规则[5](@ref)
      }
    }
  }
})

4.在ts.json的全局配置里配置

declare module "cesium" {
  export * from "cesium/Source/Cesium";
};
declare global {
  interface window {
    CESIUM_BASE_URL: string;
  }
}

5.组件封装

<script setup lang="ts">
import {
  onBeforeUnmount,
  onMounted,
  reactive,
  ref,
} from 'vue';

import { Viewer } from 'cesium';

const viewerRef = ref();
let viewer: Viewer | null = null;

onMounted(() => {
  // 动态设置开发/生产环境路径
  window.CESIUM_BASE_URL = import.meta.env.DEV
    ? '/node_modules/cesium/Build/Cesium/'
    : '/libs/cesium/';

  viewer = new Viewer(viewerRef.value!, {
    infoBox: false,   // 禁用沙箱模式避免控制台报错[2,6](@ref)
    timeline: false,
    animation: false
  });
});

onBeforeUnmount(() => {
  viewer?.destroy()  // 防止内存泄漏[5](@ref)
});
</script>
<template>

  <div ref="viewerRef" class="cesium-container"></div>


</template>
<style  lang='scss'>
@import "/node_modules/cesium/Build/Cesium/Widgets/widgets.css";

</style>