cesium入門1


本教程將獲得所有技能水平的開發人員和他們的第一個銫應用程序運行。

驗證Cesium在您的Web瀏覽器中工作的最簡單的方法是單擊此處運行Hello World示例 (打開一個新窗口)。如果你看到像下面的圖像,恭喜你的系統可以運行銫,你可以安全地跳到下一部分; 否則,繼續閱讀。

Cesium是基於幾種新的HTML5技術構建的,其中最重要的是WebGL即使這些新標准很快被廣泛采用,一些瀏覽器和系統需要更新以支持它們。如果示例應用程序不適合您,請嘗試以下幾種方法。

  1. 更新您的網絡瀏覽器。大多數Cesium團隊使用Google Chrome,但Firefox,Internet Explorer 11和Opera也可以使用。如果您已經在使用上述其中一種瀏覽器,請確保更新到最新版本。
  2. 更新您的顯卡驅動程序以更好地支持3D。如果您知道您的視頻卡類型,您可以檢查供應商網站的更新。三個最受歡迎的是:NvidiaAMD英特爾
  3. 如果您仍遇到問題,請嘗試訪問http://get.webgl.org/,其中提供了其他問題排查建議。您也可以在Cesium論壇上尋求幫助

選擇編輯器或IDE

如果你已經是一個經驗豐富的開發人員,你很可能有一個最喜歡的編輯器或開發環境; 例如,大多數銫團隊使用Eclipse如果你剛剛開始,一個偉大的免費和開源的編輯器是Notepad ++,你可以從他們的網站下載最終任何文本編輯器都會做,所以去與你最舒適的。

下載銫釋放

假設你還沒有這樣做,點擊這個按鈕抓住最新的銫釋放: Cesium-1.30.zip

下載后,將zip文件解壓到您選擇的新目錄中,我將在整個教程中將此文件稱為Cesium root目錄。內容應該看起來像下面。

它可能是誘人的雙擊index.html,但我們只會有失望的歡迎。為了使應用程序實際工作,它需要在Web服務器中運行。

為了運行Cesium應用程序,我們需要一個本地Web服務器來托管我們的文件。我們將使用Node.js來完成這個和其他教程。如果你已經有一個你想要使用的Web服務器,這也很好,只要確保托管我們在上一節中創建的根目錄。銫沒有服務器要求; 它完全是客戶端。這意味着任何可以托管靜態內容的Web服務器也可以托管Cesium。

使用Node.js設置Web服務器很容易,只需要3個步驟。1.從其網站安裝Node.js ,可以使用默認安裝設置。2.在Cesium根目錄中打開命令shell,然后通過執行下載/安裝所需的模塊npm install這將在根目錄中創建一個“node_modules”目錄。3.最后,通過node server.js在根目錄中執行啟動Web服務器你應該看到類似下面的東西

你好(再次)世界!

現在我們已經啟動並運行了一個Web服務器,我們可以啟動瀏覽器並導航到http:// localhost:8080 / Apps / HelloWorld.html這是我們在教程開始時用來測試WebGL的Hello World應用程序,但現在它運行在您自己的系統而不是Cesium網站上。如果我們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>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

 

 

這些是需要添加銫到應用程序的四行:

  1. 第一步是Cesium.js在腳本標記中包含這定義了Cesium對象,其中包含我們需要的一切。

     <script src="../Build/Cesium/Cesium.js"></script>
    
  2. 為了使用Cesium Viewer小部件,我們需要包括它的CSS。

     @import url(../Build/Cesium/Widgets/widgets.css);
    
  3. 在HTML體中,我們創建一個div,供查看器生活。

     <div id="cesiumContainer"></div>
    
  4. 最后,我們創建一個viewer的實例。

     var viewer = new Cesium.Viewer('cesiumContainer');
    

恭喜,您已經啟動並運行Cesium並准備開始編寫自己的銫應用程序和網頁。根據學習者的類型,您可能有興趣查看其他教程,介紹主要的銫功能。如果你是一個tinkerer,那么Cesium Sandcastle是一個現場編碼應用程序,它將允許你不僅查看幾十個示例,而且查看和編輯它們的源代碼,從應用程序中更新更改。最后,無論您如何學習,參考文檔包含API的詳細信息,是每個人的寶貴資源。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM