第一个cesium应用
前提：使用的是vue3创建项目。如何创建vue3
cesium官网
一、安装cesium依赖
$ npm install vite-plugin-cesium二、修改vite.config.js
import { 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.js
import { 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 'cesium'
import 'cesium/Source/Widgets/widgets.css'
// 设置Cesium的AccessToken
Cesium.Ion.defaultAccessToken = import.meta.env.VITE_CESIUM_ION_TOKEN
五、在App.vue中创建cesium实例
<template> <div ref="cesiumContainer" class="cesium-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 document's 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就完成了