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

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庫和框架作了適配:

<a href="https://cesium.com/blog/2018/03/05/integrating-cesium-and-react/" target="_blank">React: Integrating Cesium with React</a>

<a href="https://cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/" target="_blank">ThreeJS: Integrating Cesium with ThreeJS</a>

#頁面結構 ###引入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%20World.html&label=Showcases&gist=8d9d3daadd197cffd501d7210bcca3b6

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

Cesium中文網交流QQ羣：807482793

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