使用vite創(chuàng)建vue3的Cesium基礎(chǔ)項(xiàng)目

1. 使用vite創(chuàng)建vue3項(xiàng)目：可以參考官方文檔Vite官方中文文檔

   1.1 在指定文件夾路徑下使用npm（前提是已經(jīng)安裝好了node）：

   npm create vite@latest
   

   1.2 cd到創(chuàng)建的項(xiàng)目文件夾：

   cd 項(xiàng)目文件夾
   npm install
   npm run dev（可以暫時(shí)先不運(yùn)行，等安裝完Cesium再運(yùn)行）
   

2. 安裝并使用Cesium;

   2.1 找到插件：vue插件，
   
   找到社區(qū)插件，
   
   ctrl+F搜索“Cesium”，找到Cesium的插件使用教程：Cesium插件
   
   就能找到Cesium的安裝和基本配置教程：
   

   2.2 安裝Cesium

   npm i cesium vite-plugin-cesium vite -D
   # yarn add cesium vite-plugin-cesium vite -D
   

   2.3 基本配置：

   1. vite.config.js
      在項(xiàng)目的vite.config.js文件中添加：

      import { defineConfig } from 'vite';
      import cesium from 'vite-plugin-cesium';
      export default defineConfig({
        plugins: [cesium()]
      });
      

      添加完成后如下：

      import { defineConfig } from 'vite'
      import vue from '@vitejs/plugin-vue'
      import cesium from 'vite-plugin-cesium';
      export default defineConfig({
        plugins: [vue(), cesium()]
      });
      
      

   2. 配置App.vue
      在App.vue中添加：

      <template>
        <div id="cesiumContainer"></div>
      </template>
      
      <script setup>
      import * as Cesium from 'cesium';
      import { onMounted } from 'vue';
      onMounted(() => {
        let viewer = new Cesium.Viewer('cesiumContainer')
      })
      </script>
      
      <style>
      html,
      body,
      #app,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      </style>
      
      

      這里有幾個(gè)問(wèn)題解讀一下：
      （1）需要有一個(gè)dom節(jié)點(diǎn)來(lái)承載Cesium加載的地圖，所以創(chuàng)建一個(gè)<div id="cesiumContainer"></div>。
      （2）需要在初始化的時(shí)候使用鉤子函數(shù)onMounted來(lái)加載，否則會(huì)一片空白onMounted(() => { const viewer = new Cesium.Viewer('cesiumContainer') })
      （3）寫樣式的時(shí)候記得加#app，因?yàn)閯?chuàng)建的dom節(jié)點(diǎn)是掛載在#app節(jié)點(diǎn)下的；我按照其他的教程來(lái)寫css樣式的時(shí)候會(huì)有問(wèn)題，加載的地圖很小，所以在<style scoped>我把原來(lái)的scoped刪了，并且加上#app就好多了。現(xiàn)在就已經(jīng)基本可以看見(jiàn)地圖了

   3. 個(gè)人問(wèn)題

      3.1 我剛開(kāi)始加載的地圖只占頁(yè)面的一部分，所以我手動(dòng)調(diào)整了src/style.css文件中的代碼：max-width: 100%;

      #app {
        max-width: 100%;
        margin: 0 auto;
        padding: 2rem;
        text-align: center;
      }
      

      3.2 報(bào)錯(cuò)

      這樣寫可能會(huì)報(bào)錯(cuò)：

      <script setup>
      import * as Cesium from 'cesium';
      import { onMounted } from 'vue';
      onMounted(() => {
        let viewer = new Cesium.Viewer('cesiumContainer')
      })
      </script>
      

      
      搜了搜有兩種解決方案：
      （1）禁用infobox，自己設(shè)計(jì)信息面板。 但是這樣點(diǎn)物體就不會(huì)彈窗顯示信息了

      <script setup>
      import * as Cesium from 'cesium';
      import { onMounted } from 'vue';
      onMounted(() => {
        let viewer = new Cesium.Viewer('cesiumContainer', { infoBox: false, })
      })
      </script>
      

      （2）設(shè)置沙箱的權(quán)限

      <script setup>
      import * as Cesium from 'cesium';
      import { onMounted } from 'vue';
      onMounted(() => {
        let viewer = new Cesium.Viewer('cesiumContainer')
        let iframe = document.getElementsByClassName('cesium-infoBox-iframe')[0];
        iframe.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-popups allow-forms');
        iframe.setAttribute('src', '');
      })
      </script>
      

3. 效果展示;
   文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-543812.html

到了這里，關(guān)于使用vite創(chuàng)建vue3的Cesium基礎(chǔ)項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！