cesium開發（1）搭建 vue + cesium開發環境

進入新公司一段時間了，新公司業務主要從事衛星方面等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模擬衛星發射，衛星掃描，衛星過境、與地面站通信等方面的內容