Cesium入門3 - Cesium目錄框架結構

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/

app目錄

下載官網上的檔案，我們能看到以下CesiumJS庫結構：

• Source/: Cesium應用程式程式碼及資料
• ThirdParty/：外部依賴庫，不同於Cesium的第三方庫
• LICENSE.md：Cesium的License介紹
• index.html：Web首頁，需要按照Cesium要求定義頁面，同時新增Cesium依賴庫
• server.js：基於node.js的web服務應用

備註

cesiumJS與第三方JavaScript庫和框架做了適配:

React: Integrating Cesium with React

ThreeJS: Integrating Cesium with ThreeJS

#頁面結構
###引入CesiumJS

<script src="ThirdParty/Cesium/Cesium.js"></script>

開發者也可以根據自己的需求，通過ThirdParty/Cesium/source/來挑選自己的依賴庫，裁剪js的大小，

HTML結構

需要一個div作為Cesium Viewer widget的容器

<div id="cesiumContainer"></div>

需要引入app.js來啟用Cesium Viewer，app.js最好在HTML末尾引入。

<script src="Source/App.js"></script>

新增CSS樣式

需要引入Cesium viewer中的各種widget的樣式
新建一個index.css，並引入到index.html中

<link rel="stylesheet" href="index.css" media="screen">

在index.css中加入以下預設的Cesium CSS。

@import url(ThirdParty/Cesium/Widgets/widgets.css);

操作步驟

1. 開啟Source/App.js，刪除contents
2. 拷貝Source/AppSkeleton.js到Source/App.js
3. 確認server.js在Cesium資料夾根目錄，並執行server.js (npm server.js)
4. 在新版本（支援WebGL）的瀏覽器中輸入localhost:8080

如果有任何問題：

完整程式碼：https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello World.html&label=Showcases&gist=8d9d3daadd197cffd501d7210bcca3b6

推薦程式碼：https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello World.html&label=Showcases&gist=113c3467755fc38d9f9bce16a94475fc

Cesium中文網交流QQ群：807482793

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/