Cesium入門2 - Cesium環境搭建及第一個示例程式
Cesium入門2 - Cesium環境搭建及第一個示例程式
Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/
驗證瀏覽器
Cesium需要瀏覽器支援WebGL，可以通過CesiumJS官網提供的一個HelloWorld例子來測試自己的瀏覽器是否支援Cesium。（推薦使用Chrome）
測試地址：
https://cesiumjs.org/Cesium/Apps/HelloWorld.html
選擇IDE
官網中寫到：
If you’re already a seasoned developer, 如果你已經是一個經驗豐富的開發人員，你很可能有一個最喜歡的編輯器或開發環境; 例如，大多數Cesium團隊使用Eclipse。如果你剛剛開始，一個偉大的免費和開源的編輯器是Notepad ++，你可以從他們的網站下載。最終任何文字編輯器都會做，所以去與你最舒適的。
我個人之前開發PHP較多，所以我使用的是PHPStorm，其實我不推薦Eclipse，我比較推薦和Idea一母同胞的WebStorm。考慮到工程和資料夾的管理，我也不推薦Notepad++，輕量級的IDE我比較推薦Sublime Text.
下載Cesium原始碼
最新的release版本程式碼下載地址：
https://cesiumjs.org/tutorials/cesium-up-and-running/
下載後，將zip檔案解壓到您選擇的新目錄中，我將在整個教程中將此檔案稱為Cesium root目錄。內容應該看起來像下面。
直接點選index.html是無效的，需要放入Web Server容器中，才能執行起來。
Server端
Cesium是純前端的程式碼，官方給出的原始碼中，配套了nodejs的server端，以及可以通過nodejs進行安裝部署。實際上可以將Cesium部署進入tomcat（geoserver）、apache、nginx等伺服器中。
官網推薦的是nodejs
- 從官網中下載Node.js(https://nodejs.org/en/), 實際上nodejs有一些引數可是配置，使用預設的引數即可。.
- 在Cesium所在的資料夾目錄，開啟cmd或者bash敲入命令
npm install
下載依賴的npm模組，比如express等。如果成功，會在Cesium資料夾中床架 ‘node_modules’資料夾。
3. 最後在cmd或者bash中執行
shell node server.js
或者
shell npm start
- 成功之後能看到如下的截圖
控制檯會顯示：
Cesium development server running locally. Connect to http://localhost:8080
備註：不能關閉控制檯，保持一直執行狀態。開啟瀏覽器，輸入 http://localhost:8080 即可訪問Cesium.
如果你不想用nodejs
Cesium是一個開源專案，GitHub上的下載地址為：https://github.com/AnalyticalGraphicsInc/cesium
最簡單的安裝方式，就是普通的JS檔案載入，只需要從Github中下載其js程式碼，放到自己的專案中，在html頁面中引用即可。如下：
新建一個helloworld.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello 3D Earth</title>
<script src="CesiumUnminified/Cesium.js"></script>
<style>
@import url(CesiumUnminified/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script src="app.js"></script>
</body>
</html>
新建一個app.js
viewer = new Cesium.Viewer('cesiumContainer');
其中cesiumContainer為html中的地圖顯示div的id。就是這麼簡單，瀏覽器開啟上述html頁面，便可看到一個三維地球。底圖為微軟影像只是載入到了三維地球上，包含放大、縮小、平移等基本線上地圖功能，同時還包含了時間軸等與時間有關的控制元件，這是Cesium的一個特色，其地圖、物件以及場景等能與時間相關聯。
本地的Hello World程式
現在本地的node服務已經執行起來，開啟瀏覽器，輸入：http://localhost:8080/Apps/HelloWorld.html.
能看到和官方一模一樣的hello wolrd 三維數字地球。
hello World程式碼分析
官網hello world程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
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>
</html>
以下四個步驟將Cesium加入到html中：
- 引入Cesium.js， 該javascript定義了Cesium object
<script src="../Build/Cesium/Cesium.js"></script>
- 匯入Cesium Viewer widget的樣式
@import url(../Build/Cesium/Widgets/widgets.css);
- cesium view存在於該div中
<div id="cesiumContainer"></div>
- 最終建立cesium viewer
var viewer = new Cesium.Viewer('cesiumContainer');
Cesium中文網交流QQ群：807482793
Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/