Cesium入門2 - Cesium環境搭建及第一個示例程序

時間 2019-11-07

標籤 cesium 入門環境搭建及第一個示例程序简体版

原文原文鏈接

Cesium入門2 - Cesium環境搭建及第一個示例程序

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

驗證瀏覽器

Cesium須要瀏覽器支持WebGL，能夠經過CesiumJS官網提供的一個HelloWorld例子來測試本身的瀏覽器是否支持Cesium。（推薦使用Chrome）測試地址： https://cesiumjs.org/Cesium/Apps/HelloWorld.htmlcss

選擇IDE

官網中寫到：html

If you’re already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

若是你已是一個經驗豐富的開發人員，你極可能有一個最喜歡的編輯器或開發環境; 例如，大多數Cesium團隊使用Eclipse。若是你剛剛開始，一個偉大的免費和開源的編輯器是Notepad ++，你能夠從他們的網站下載。最終任何文本編輯器都會作，因此去與你最溫馨的。前端

我我的以前開發PHP較多，因此我使用的是PHPStorm，其實我不推薦Eclipse，我比較推薦和Idea一母同胞的WebStorm。考慮到工程和文件夾的管理，我也不推薦Notepad++，輕量級的IDE我比較推薦Sublime Text.java

下載Cesium源代碼

最新的release版本代碼下載地址： https://cesiumjs.org/tutorials/cesium-up-and-running/node

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

直接點擊index.html是無效的，須要放入Web Server容器中，才能運行起來。git

Server端

Cesium是純前端的代碼，官方給出的源代碼中，配套了nodejs的server端，以及能夠經過nodejs進行安裝部署。實際上能夠將Cesium部署進入tomcat（geoserver）、apache、nginx等服務器中。github

官網推薦的是nodejsweb

從官網中下載Node.js(https://nodejs.org/en/), 實際上nodejs有一些參數但是配置，使用默認的參數便可。.
在Cesium所在的文件夾目錄，打開cmd或者bash敲入命令

npm install

下載依賴的npm模塊，好比express等。若是成功，會在Cesium文件夾中牀架 ‘node_modules’文件夾。 3. 最後在cmd或者bash中執行 shell node server.js 或者 shell npm start

成功以後能看到以下的截圖

控制檯會顯示：

Cesium development server running locally.  Connect to http://localhost:8080

備註：不能關閉控制檯，保持一直運行狀態。打開瀏覽器，輸入 http://localhost:8080 便可訪問Cesium.

若是你不想用nodejs

Cesium是一個開源項目，GitHub上的下載地址爲：https://github.com/AnalyticalGraphicsInc/cesium 最簡單的安裝方式，就是普通的JS文件加載，只須要從Github中下載其js代碼，放到本身的項目中，在html頁面中引用便可。以下：

新建一個helloworld.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello 3D Earth</title>
    <script src="CesiumUnminified/Cesium.js"></script>
    <style>
        @import url(CesiumUnminified/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="app.js"></script>
</body>
</html>

新建一個app.js

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

其中cesiumContainer爲html中的地圖顯示div的id。就是這麼簡單，瀏覽器打開上述html頁面，即可看到一個三維地球。底圖爲微軟影像只是加載到了三維地球上，包含放大、縮小、平移等基本在線地圖功能，同時還包含了時間軸等與時間有關的控件，這是Cesium的一個特點，其地圖、對象以及場景等能與時間相關聯。

本地的Hello World程序

如今本地的node服務已經運行起來，打開瀏覽器，輸入：http://localhost:8080/Apps/HelloWorld.html. 能看到和官方如出一轍的hello wolrd 三維數字地球。

hello World代碼分析

官網hello world代碼以下：

<!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>

如下四個步驟將Cesium加入到html中：

引入Cesium.js，該javascript定義了Cesium object

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

導入Cesium Viewer widget的樣式

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

cesium view存在於該div中

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

最終建立cesium viewer

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

Cesium中文網交流QQ羣：807482793

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。