第一个cesium应用

前提使用的是vue3创建项目。如何创建vue3cesium官网一、安装cesium依赖$ npm install vite-plugin-cesium二、修改vite.config.jsimport { fileURLToPath, URL } from node:url import { defineConfig } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx import cesium from vite-plugin-cesium import vueDevTools from vite-plugin-vue-devtools // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), vueJsx(), vueDevTools(), cesium(), ], resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)), cesium: fileURLToPath(new URL(./node_modules/cesium, import.meta.url)), }, }, define: { CESIUM_BASE_URL: JSON.stringify(/cesium) }, })重点是import cesium from vite-plugin-cesium和plugins: []中添加cesium(),三、在根目录创建.env文件内容如下# Cesium Ion Access Token,从https://ion.cesium.com获取 VITE_CESIUM_ION_TOKEN你的Cesium Ion Access Token四、修改main.jsimport { createApp } from vue import { createPinia } from pinia import * as Cesium from cesium import cesium/Source/Widgets/widgets.css import App from ./App.vue import router from ./router // 设置Cesium的AccessToken Cesium.Ion.defaultAccessToken import.meta.env.VITE_CESIUM_ION_TOKEN const app createApp(App) app.use(createPinia()) app.use(router) app.mount(#app)重点是import * as Cesium from cesiumimport cesium/Source/Widgets/widgets.css// 设置Cesium的AccessTokenCesium.Ion.defaultAccessToken import.meta.env.VITE_CESIUM_ION_TOKEN五、在App.vue中创建cesium实例template div refcesiumContainer classcesium-container/div /template script setup import { ref, onMounted, onUnmounted } from vue import * as Cesium from cesium import cesium/Source/Widgets/widgets.css const cesiumContainer ref(null) let viewer null onMounted(() { viewer new Cesium.Viewer(cesiumContainer.value) }) onUnmounted(() { if (viewer) viewer.destroy() }) /script style scoped .cesium-container { width: 100vw; height: 100vh; } /style六、关闭infoBox项目运行后浏览器控制台提示Blocked script execution in about:blank because the documents frame is sandboxed and the allow-scripts permission is not set.解决办法是onMounted(() { viewer new Cesium.Viewer(cesiumContainer.value, { infoBox: false, // 禁用infoBox避免沙盒化iframe问题 }) })更多初始化配置参数详见Cesium.Viewer.ConstructorOptions至此一个完整的cesium的hello world demo就完成了