在上節說道vue專案中映入cesium所需要搭建的環境，這節補充一下；、、注意此專案中使用cesium版本號為1.6.0

這裡直接在App.vue裡測試，後期搭建好路由再做修改；程式碼貼在下面：

初始化操作都註釋了，注意token在實際像目需求中會更改 2022-01-10
<template> <div class="map-box"> <div id="cesiumContainer"></div> </div> </template>
<script> var viewer = null export default { name: "No01Init", data() { return {} }, mounted() { /* eslint-disable no-undef */ Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMjk0N2EyNi1mZjFhLTQ2NzEtOGI5Ny1mNzBhNTAyYmU4MGUiLCJpZCI6Nzg2OTQsImlhdCI6MTY0MTQ1NTk5Nn0.1LiKPiaQVLIXDSkdj908Ybbn3rs5kEchUh5X0ZvTuHc' // viewer = new Cesium.CesiumWidget('cesiumContainer') viewer = new Cesium.Viewer("cesiumContainer", { animation: false, // 隱藏動畫控制元件 baseLayerPicker: false, // 隱藏圖層選擇控制元件 fullscreenButton: false, // 隱藏全屏按鈕 vrButton: false, // 隱藏VR按鈕，預設false geocoder: false, // 隱藏地名查詢控制元件 homeButton: false, // 隱藏Home按鈕 infoBox: false, // 隱藏點選要素之後顯示的資訊視窗 sceneModePicker: false, // 隱藏場景模式選擇控制元件 selectionIndicator: true, // 顯示實體物件選擇框，預設true timeline: false, // 隱藏時間線控制元件 navigationHelpButton: false, // 隱藏幫助按鈕 scene3DOnly: true, // 每個幾何例項將只在3D中呈現，以節省GPU記憶體 shouldAnimate: true, // 開啟動畫自動播放 sceneMode: 3, // 初始場景模式 1：2D 2：2D迴圈 3：3D，預設3 requestRenderMode: true, // 減少Cesium渲染新幀總時間並減少Cesium在應用程式中總體CPU使用率 // 如場景中的元素沒有隨模擬時間變化，請考慮將設定maximumRenderTimeChange為較高的值，例如Infinity maximumRenderTimeChange: Infinity }) // 隱藏下方Cesium logo viewer.cesiumWidget.creditContainer.style.display = "none" console.log(viewer) }, } </script>
<style scoped> .map-box { width: 100%; height: 100%; } #cesiumContainer { width: 100%; height: 100%; } </style>

這樣得到一個只有球體的頁面，方便我們接下來的開發。