第一步:使用vite创建一个vue项目
1.yarn create vite cesiumapp --template vue
2.cd cesiumapp
3.yarn install
4.yarn dev
第二步:安装Cesium相关插件
yarn add cesium vite-plugin-cesium vite -D
第三步:在vite.config.js中引入插件
import cesium from 'vite-plugin-cesium'; // 引入插件
export default defineConfig({
plugins: [vue(),cesium()]
})
第四步:在App.vue中创建cesium容器并创建实例
<template>
<div id="cesiumContainer"></div>
</template>
<script setup>
import { Viewer } from "cesium"; //引入cesium
import { onMounted } from "vue";
onMounted(() => {
//初始化cesium实例
const viewer = new Viewer("cesiumContainer");
//Cesium处理iframe的allow-scripts权限问题
const iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0]; // 获取iframe dom元素
iframe.setAttribute(
"sandbox",
"allow-same-origin allow-scripts allow-popups allow-forms"
);
iframe.setAttribute("src", "");
});
</script>
<style>
#cesiumContainer {
width: 100%;
height: 500px;
}
</style>
加载成功,界面显示cesium地球