Cesium案例解析(一)——HelloWorld
- 2019 年 12 月 12 日
- 筆記
1. 概述
感覺網上已經有不少關於cesium的教程了，但是學習一個框架最快的辦法就是熟悉其自帶的實例了。cesium網站上提供了一系列實例，就想通過這些實例總結下學習cesium的知識；當然，如果有別的實例，也會一起總結。
從cesium官方網站上下載的build包括了源程式碼，幫助資料，Sandcastle實例等內容，並且能夠通過Node.JS建立關於該版本的cesium網站，能夠從中查閱文檔，實例學習等。
一般來說要使用cesium，需要建立一個伺服器，讓cesium在伺服器的域內使用。但其實也不用那麼複雜，如果只是學習，可以設置瀏覽器跨域，也能夠讓cesium運行，畢竟cesium是基於WebGL的前端框架，基本與後台無關。瀏覽器設置跨域的辦法可以自行在網上搜索解決辦法，各種瀏覽器的設置不同。
cesium自帶的實例位置如下圖所示：
圖1：cesium實例位置
可以將這些實例直接拖入到設置跨域的本地瀏覽器中運行，可以到達在伺服器域內運行同等的效果。提醒一下設置跨域的本地瀏覽器應該只運行自己編寫的實例或者確定安全的網頁，否則存在安全風險。
2. 實例
按照慣例，任何語言或者框架的第一步都是HelloWorld，cesium也不例外。
2.1. HelloWorld.html
<!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 src="HelloWorld.js"></script> </body> </html>
這段HTML程式碼比較簡單:首先是導入了組件cesium.js及其樣式表widgets.css,兩者都來自於cesium源程式碼；然後創建了一個名為cesiumContainer的div圖層，並設定其樣式；最後是導入了自己寫的JS程式碼HelloWorld.js。
2.2. HelloWorld.js
"use strict" //Add your ion access token from cesium.com/ion/ Cesium.Ion.defaultAccessToken = '----'; var viewer = new Cesium.Viewer('cesiumContainer');
HelloWorld.js就更加簡單了，僅僅通過一句程式碼就創建了包含多個組件的數字地球組件。注意默認創建的數字地球圖層中包含的Bing地圖是需要Token支援的，可以在cesium的官網上申請一個。否則有可能地球無法顯示。
3. 結果
在瀏覽器中運行的結果如下：
