vue3引入cesium和olcs

首先引入包

pnpm i  olcs;
pnpm i -D vite-plugin-cesium
pnpm i -S cesium

在vite.config.js中配置，参考这位大佬的笔记
添加链接描述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
// http://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()],
})

在main.js配置

import * as Cesium from 'cesium'
// window['CESIUM_BASE_URL'] = '/assets/cesium/';
window['Cesium'] = Cesium

写个案例，参考大佬的文章
添加链接描述
唯一的区别是我是直接从包里引入的，大佬是将包里的文件拿出来用的

<template>
<div class="main">
<el-checkbox v-model="state.isShow3D" label="三维地球" size="large" @change="switchTo"
style="position: absolute;z-index: 99;color: white;" />
<div id="cesiumContainer"></div>
<div id="olContainer"></div>
</div>
</template>
<script setup>
import * as Cesium from 'cesium';
import { onMounted, reactive } from 'vue';
import { ElCheckbox } from 'element-plus';
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from "ol/source/XYZ";
// import olcsCamera from "./lib/ol-cesium/Camera.js";
import  olcsCamera from "olcs/Camera";
import OLCesium from "olcs";
const state = reactive({
isShow3D: false,
element2D: {},
element3D: {},
camera: {},
});
const switchTo = () => {
state.camera.checkCameraChange();
state.element2D.style.visibility = state.isShow3D
? "hidden"
: "visible";
state.element3D.style.visibility = state.isShow3D
? "visible"
: "hidden";
}
onMounted(() => {
const cesiumViewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });
window.cesiumViewer = cesiumViewer;//挂载到window上
// console.log(new OLCesium,'new OLCesium');
const olViewer = new Map({
target: "olContainer",
layers: [
new TileLayer({
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf",
}),
}),
],
view: new View({
projection: "EPSG:4326",    //使用这个坐标系
center: [104.704968, 31.540962],  //西南科技大学
zoom: 5
})
});
state.element2D = document.getElementById("olContainer");
state.element3D = document.getElementById("cesiumContainer");
state.camera = new olcsCamera(
cesiumViewer.scene,
olViewer
);
state.element3D.style.visibility = "hidden";
})
</script>
<style lang="less" scoped>
.main {
position: relative;
height: 100vh;
width: 100vw;
#cesiumContainer {
position: absolute;
height: 100vh;
width: 100vw;
}
#olContainer {
position: absolute;
height: 100vh;
width: 100vw;
}
}
</style>

放个图片

最后在放一个链接，就是报错Cesium is not defined的解决方法
添加链接描述