進入新公司一段時間了，新公司業務主要從事衛星方面等webgl的開發，主要使用了leafletjs和cesium，其中cesium難度較大，需求較多，再進行了一段時間的使用開發後依舊感到有些力不從心，

因此決定從頭對cesium進行一個系統的學習，至於那些老掉牙的理論就不說了，一切以程式碼為準。

開發環境: vue-cli4 vue版本：2.6.11 cesium版本：1.86.1

首先就是使用vue建立一個vue專案了，選擇vue2版本，其實vue3在使用的時候都相差不大，對有些新更新的內容相容性更好，但考慮到當前主要還是使用vue2，因此基於2版本進行開發

然後是按照cesium

npm i cesium

我當前安裝的是1.86.1版本，當前版本在vue2使用時會有一些小問題，後面會提到。

安裝完成就將其引入專案，在這裡我沒有像網路上說的去配置vue.config.js,而是直接去引入cesium:

import * as Cesium from 'cesium'

這時直接啟動時會報一個錯誤

error  in ./node_modules/cesium/Source/ThirdParty/zip.js

 function getWorker(options = {}) {
              return new Worker(new URL(workerData.scripts[0],       import.meta.url), options);
      }    
 

主要原因是wenpace在載入import.meta的時候需要一個loader，安裝一下就行了，在vue3+vite中就沒有這個問題

npm i @open-wc/webpack-import-meta-loader -S

然後在vue.config.js裡面配置,沒有就在專案根目錄新建一個

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: {
                        loader: '@open-wc/webpack-import-meta-loader',
                    },
                },
            ],
        },
    },
}
 

啟動，成功。

使用cesium的時候需要在官網申請一個key，同時在main.js寫入

window.CESIUM_BASE_URL = '/'

在這裡使用了高德地圖，需要的可以參考一下，

https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

同時把該目錄下的檔案複製到專案的public資料夾下面

開啟，網站就大工告成了，同時打包測試一下，這時發現又出現了一個問題，報了一個錯誤

Cannot read property 'length' of undefined

這是@open-wc/webpack-import-meta-loader版本問題，通過降級或者修改進行解決：

再次打包，，ok，使用serve啟動專案，成功，效果如下，大功告成

後繼將繼續更新cesium模擬衛星發射，衛星掃描，衛星過境、與地面站通訊等方面的內容