搭建第一個(gè) Vite 項(xiàng)目
# yarn
yarn create vite my-vue-app --template vue
yarn 安裝 cesium
yarn add cesium # 這個(gè)是給開發(fā)時(shí) vite 的 esbuild 找模塊用的
# yarn add @types/cesium -D # 這個(gè)是給智能提示用的抛猫，例如 import { Viewer } from 'cesium'
安裝 vite 插件
yarn add -D vite vite-plugin-cesium
配置 vite.config.js
由于 Cesium 不是一個(gè)普通的 npm 包打肝，需要依賴一些 css 棵红，圖片，json 啥的悬嗓。我們要參考 Cesium 官方的 webpack 教程 來做一堆額外的工作具帮。
值得慶幸的是現(xiàn)在 Vite 有了 vite-plugin-cesium 插件，來幫我們完成這些配置痒芝。
vite.config.js
import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium'; // 引入插件
export default defineConfig({
plugins: [cesium()],
});
使用
import * as Cesium from "cesium";
第一個(gè)demo
報(bào)錯：Can’t run scripts in infobox
官方方法
App.vue
<template>
<div id="cesiumContainer"></div>
</template>
<script >
import * as Cesium from "cesium";
import { onMounted } from "vue";
export default {
setup() {
onMounted(() => {
console.log("Cesium.VERSION", Cesium.VERSION);
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxNTFlNWVmMC1jOWRhLTQyMDktOTY4Ny02YTU5YWFlMGYwY2IiLCJpZCI6OTQzNDQsImlhdCI6MTY1Mjg4ODEyNn0.g2vq1qq_rdfZeRTy73nBkEDzhMIM4upkYcbIdFYnCiQ";
var viewer = new Cesium.Viewer("cesiumContainer", {
// animation: false, // 是否開啟動畫
// timeline: false, // 是否顯示時(shí)間軸
});
viewer.scene.globe.show = true;
// This works
viewer.infoBox.frame.removeAttribute("sandbox"); // 必須要加，不然有報(bào)錯： Can’t run scripts in infobox
// So does this if you want to limit other things but allow scripts
//viewer.infoBox.frame.setAttribute("sandbox", "allow-same-origin allow-popups allow-forms allow-scripts");
// In both cases, you need to do this to force a reload for the change to take affect.
viewer.infoBox.frame.src = "about:blank";
viewer.selectedEntity = new Cesium.Entity({
id: "YouTube video",
description:
'<div style="height:315px;"><iframe width=100% height="315" src="https://www.youtube.com/embed/wo5rWeeZxvo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>',
});
});
},
};
</script>
<style>
</style>
