開發環境準備

利用Cesium API進行二次開發屬于Web前端開發范疇，目前比較火的Web三劍客包括React、Vue、AngularJS，每個js庫的詳細介紹可轉至官網查看，在此不做詳細介紹。本次開發環境是基于Vue搭建的，需要安裝(部署)的軟件主要包括以下幾種：

IDE：VS Code
瀏覽器：Chrome
Web服務器：nginx
包管理：node

前兩個下載后安裝即可，注意VS Code需要安裝Live Server擴展；nginx下載后的壓縮包解壓到電腦磁盤路徑下(比如E盤跟路徑下)，配置好conf文件夾下的nginx.conf文件，雙擊nginx跟路徑下的nginx.exe程序啟動服務；同樣node下載后的壓縮包也解壓到某個路徑下，不同的是需要配置node系統環境變量，配置流程如下：我的電腦→右擊屬性→點擊左側的高級系統設置→點擊環境變量→在系統變量中選中Path點擊編輯→點新建將node的存儲目錄復制過去(比如E:ode-v12.16.2-win-x64)。配置好之后打開cmd命令窗口輸入node -v，顯示版本則表示安裝成功。

Cesium源碼下載

Cesium最新版本下載地址：https://cesium.com/downloads/，本次教程用的1.75版本的Cesium，如果當前版本較高，可點擊Previous releases找到1.75版本的Cesium下載，下載界面如下圖所示：

下載完之后進行解壓，壓縮包主要內容如下圖所示。

用VS Code打開解壓后的文件夾，右擊跟路徑下的index.html，選“Open with Live Server”，運行界面如下：

Cesium ion：Cesium在線資源-地形(createWorldTerrain)、影像(createWorldImagery/IonImageryProvider)、OSM(createOsmBuildings)、點云(IonResource.fromAssetId)、3DTiles等

Local links：Cesium本地資源鏈接，文檔、示例、單元測試等

External links：Cesium外部資源鏈接，社區、博客、GitHub等

環境搭建(純HTML)

通過在html文件中引用cesium比較簡單，新建文件夾(cesium_traning)，將上面的Build文件夾(只拷貝里面的Cesium)拷貝到cesium_traning中，在cesium_traning根路徑下創建examples文件夾，在examples文件夾下創建html文件，代碼如下：(詳情可查看https://github.com/ls870061011)

Hello World

環境搭建(Vue CLI)

創建Vue工程

創建Vue工程，需要提前安裝Vue腳手架，可在cmd命令窗口通過npm install -g @vue/cli命令安裝，安裝成功后輸入vue --version命令檢查安裝版本。

當然如果你喜歡用yarn的話，可通過以下命令安裝yarn和vue腳手架。

npm i yarn -gyarn global add @vue/cli

到此，你的電腦環境中已經具備創建vue工程的能力，下面就是通過在某個路徑下打開cmd命令窗口執行vue create vue_cesium_js命令一步一步創建vue工程了，具體每一步選項的具體意義這里就不詳細解釋了，想了解的可查詢相關資料。每一步的選項及部分截圖如下：

剩下的就是等待了，工程創建好之后，用VS Code打開此工程，在終端輸入yarn add cesium@1.75等待cesium包安裝完成即可。

配置vue.config.js

首先執行yarn add webpack copy-webpack-plugin --dev，在vue.config.js中的configureWebpack配置如下代碼：詳情可查看本人GitHub地址中的工程。

https://github.com/ls870061011/vue_cesium_tsgithub.com

config.plugins = [ ...config.plugins, new CopyWebpackPlugin({ patterns: [ { from: 'node_modules/cesium/Build/Cesium', to: 'cesium', }, ], }), new webpack.DefinePlugin({ // Define relative base path in cesium for loading assets CESIUM_BASE_URL: JSON.stringify('./cesium'), }), ];

到目前為止，所有環境都已搭建好，下一步就是見證奇跡的時刻了。

第一個示例

如果是純html的頁面，可在VS Code中選中html文件右擊Open with Live Server；如果是vue工程，在VS Code終端輸入yarn serve按回車。不管是哪種方式，最終顯示的結果都是一樣的，大功告成，如下圖所示。

總結

以上是生活随笔為你收集整理的cesium 页面截图_Cesium开发入门篇 | 02开发环境搭建及第一个示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。