(一)Cesium的概念定義
Cesium是國外一個基於JavaScript編寫的使用WebGL的地圖引擎。Cesium支持3D,2D,2.5D形式的地圖展示,可以自行繪制圖形,高亮區域,並提供良好的觸摸支持,且支持絕大多數的瀏覽器和mobile,CesiumJS是一個開放源代碼JavaScript庫,用於創建具有最佳性能,精度,視覺質量和易用性的世界一流的3D地球和地圖。從航空航天到智慧城市再到無人機,各行各業的開發人員都使用CesiumJS創建用於共享動態地理空間數據的交互式Web應用程序。CesiumJS建立在開放格式上,旨在實現強大的互操作性。從Cesium ion或其他來源獲取數據,使用CesiumJS進行可視化,並與台式機或移動設備上的用戶共享。CesiumJS的下載量超過1,000,000,為數百萬用戶提供了強大的應用程序,整個定義來自官方網站。
(二)Cesium的安裝與配置環境
前面已經了解了什么是Cesium,現在就是開始使用了,說到安裝其實Cesium會有一個資源包,目前已經到了1.72版本了,下載下來在代碼進行引用即可。如果你網速夠給力,且可翻,也可不用下載資源包,在代碼中通過src將js與css格式在線引用,不過該方法會出現加載慢的特點,建議還是將資源包下載下來,本地引用。另外說到配置環境,對於前端來說,nodejs的環境必須要有的,看到很多博主用Python、tomcat以及IIS進行http環境搭建,本人使用的為git命令行輸入http-server的方式進行http服務的環境搭建的,不過原理大致一樣,配置完相關的環境,就可以寫出Cesium的第一例子了。
(三)Cesium的第一個實例
很多博主中第一個實例出現的第一段代碼基本都是var viewer = new Cesium.Viewer('cesiumContainer'),然后把h5的其他部分補齊,出現了一個大大的地球,於是小伙伴們感覺去嘗試了一下,發現事情並不簡單,大部分用該代碼出現的就是一個大大的黑框除了cesium自帶的一些東西外,並沒有出現地球,那是為什么那?好了不買關子了,這里不出現地球最主要的原因是版本變了,因為我們在加載上面的代碼的時候,默認使用的是必應的底圖,但在1.5版本以后,加載底圖不能說隨便加載了,你必須有必應的token才行,那就要去先去注冊一個token了,(必應地圖地址https://www.bingmapsportal.com/),如圖注冊完成以后的截圖:
token創建完成,就好操作了,代碼如下:
<!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!111</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 id="cesiumxin" style="position:fixed;left:0;z-index:99"><a href="http://cesium.xin" style="color:aliceblue;text-decoration:none">http://cesium.xin <label for="">cesium中文網 http://cesium.xin </label></a></div> </div> <script> Cesium.BingMapsApi.defaultKey = "你的key"; var viewer = new Cesium.Viewer("cesiumContainer", { animation: false, //是否創建動畫小器件,左下角儀表 timeline: false, //是否顯示時間線控件 geocoder: false, //是否顯示地名查找控件 shouldAnimate: true, baseLayerPicker: false, //是否顯示圖層選擇控件 imageryProvider: new Cesium.BingMapsImageryProvider({ url: "https://dev.virtualearth.net", mapStyle : Cesium.BingMapsStyle.AERIAL }), }); </script> </body> </html>
這時候你再去運行會發現,那個久違的地球出來了,如圖:

