開發(fā)環(huán)境準(zhǔn)備
利用Cesium API進(jìn)行二次開發(fā)屬于Web前端開發(fā)范疇学歧，目前比較火的Web三劍客包括React悍及、Vue挪捕、AngularJS罚缕，每個js庫的詳細(xì)介紹可轉(zhuǎn)至官網(wǎng)查看割粮，在此不做詳細(xì)介紹盾碗。本次開發(fā)環(huán)境是基于Vue搭建的，需要安裝（部署）的軟件主要包括以下幾種：
IDE：VS Code
瀏覽器：Chrome
Web服務(wù)器：nginx
包管理：node
前兩個下載后安裝即可舀瓢，注意VS Code需要安裝Live Server擴(kuò)展廷雅；nginx下載后的壓縮包解壓到電腦磁盤路徑下（比如E盤跟路徑下），配置好conf文件夾下的nginx.conf文件京髓，雙擊nginx跟路徑下的nginx.exe程序啟動服務(wù)航缀；同樣node下載后的壓縮包也解壓到某個路徑下，不同的是需要配置node系統(tǒng)環(huán)境變量堰怨，配置流程如下：我的電腦→右擊屬性→點擊左側(cè)的高級系統(tǒng)設(shè)置→點擊環(huán)境變量→在系統(tǒng)變量中選中Path點擊編輯→點新建將node的存儲目錄復(fù)制過去（比如E:\node-v12.16.2-win-x64\）芥玉。配置好之后打開cmd命令窗口輸入node -v，顯示版本則表示安裝成功备图。
Cesium源碼下載
Cesium最新版本下載地址：https://cesium.com/downloads/灿巧，本次教程用的1.75版本的Cesium，如果當(dāng)前版本較高揽涮，可點擊Previous releases找到1.75版本的Cesium下載抠藕，下載界面如下圖所示：
下載完之后進(jìn)行解壓，壓縮包主要內(nèi)容如下圖所示蒋困。
用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外部資源鏈接乾吻，社區(qū)、博客拟蜻、GitHub等
環(huán)境搭建（純HTML）
通過在html文件中引用cesium比較簡單绎签，新建文件夾（cesium_traning），將上面的Build文件夾（只拷貝里面的Cesium）拷貝到cesium_traning中酝锅，在cesium_traning根路徑下創(chuàng)建examples文件夾诡必，在examples文件夾下創(chuàng)建html文件，代碼如下：（詳情可查看https://github.com/ls870061011）
<!DOCTYPE html>
<head>
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer("cesiumContainer");
</script>
</body>
環(huán)境搭建（Vue CLI）
創(chuàng)建Vue工程
創(chuàng)建Vue工程搔扁，需要提前安裝Vue腳手架爸舒，可在cmd命令窗口通過npm install -g @vue/cli命令安裝，安裝成功后輸入vue --version命令檢查安裝版本稿蹲。
當(dāng)然如果你喜歡用yarn的話扭勉，可通過以下命令安裝yarn和vue腳手架。
npm i yarn -g
yarn global add @vue/cli
到此苛聘，你的電腦環(huán)境中已經(jīng)具備創(chuàng)建vue工程的能力涂炎，下面就是通過在某個路徑下打開cmd命令窗口執(zhí)行vue create vue_cesium_js命令一步一步創(chuàng)建vue工程了，具體每一步選項的具體意義這里就不詳細(xì)解釋了设哗，想了解的可查詢相關(guān)資料唱捣。每一步的選項及部分截圖如下：
剩下的就是等待了，工程創(chuàng)建好之后网梢，用VS Code打開此工程震缭，在終端輸入yarn add cesium@1.75等待cesium包安裝完成即可。
配置vue.config.js
首先執(zhí)行yarn add webpack copy-webpack-plugin --dev战虏，在vue.config.js中的configureWebpack配置如下代碼：詳情可查看本人GitHub地址https://github.com/ls870061011/vue_cesium_ts中的工程拣宰。
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'),
}),
];
到目前為止，所有環(huán)境都已搭建好烦感，下一步就是見證奇跡的時刻了徐裸。
第一個示例
如果是純html的頁面，可在VS Code中選中html文件右擊Open with Live Server啸盏；如果是vue工程，在VS Code終端輸入yarn serve按回車骑祟。不管是哪種方式回懦，最終顯示的結(jié)果都是一樣的气笙，大功告成，如下圖所示怯晕。
