歡迎來到Cesium社區，非常高興能加入我們。爲了幫助您開發自己的web地圖應用程序，本教程將從頭到尾介紹如何開發一款簡單但有廣泛影響的Cesium應用程序。本教程將接觸到許多CesiumJS API重要的方面，但這並不意味着包括所有（CesiumJS具有很多特性！）。我們的目標是介紹Cesium的基本原理和探索Cesium剩餘部分所需的工具。
(1)概述(Overview)
我們將創建一個簡單的應用，來可視化New York City中的示例geocache位置。將加載並樣式化多種類型的2D、3D數據，並創建幾個相機和展示選項，用戶可以利用其進行交互設置。最後，作爲一個高技術的geocachers，我們將加載一個3D無人機模型去偵察這些geocache位置，充分利用3D可視化。
本教程結束的時候，你將有一個Cesium特性的工作概述，包括配置Cesium觀察器、加載數據集、創建和樣式化幾何體，使用3DTiles，控制相機，爲應用增加鼠標交互。
7 交互式可視化示例geocache位置應用程序
(2)安裝(Setup)
我們着手開發之前，僅需要幾個安裝步驟：
1.訪問Cesium Viewer來確保你的系統兼容Cesium。沒有出現球的話，請查看Troubleshooting；
2.安裝Node.js；
3.獲取workshop code，可以克隆或者下載zip文件，提取出內容；
4.在你的控制檯，導航到root cesium-workshop文件夾；
5.運行npm install；
6.運行npm start。
終端中應該會顯示以下內容：
$ Cesium development server running locally. Connect to http://localhost:8080
不要關閉終端，需要保持程序在運行中。
接下來，在你的瀏覽器中導航到localhost:8080，應該可以看到workshop應用程序啓動並運行。
①應用程序目錄結構（The app directory）
在應用程序目錄中，我們應該可以看到以下文件夾和文件。需要留意的是，應用程序的目錄被設計的儘可能簡單，並且只包含了CesiumJS庫。
Source/：應用程序的代碼和數據；
ThirdParty/：外部庫，這了例子中僅僅包含CesiumJS庫；
LICENSE.md：應用程序使用條款；
index.html：主html頁面，需要應用程序的代碼並且含有應用程序結構；
server.js：簡單服務器，將從它運行應用程序。
注意：
CesiumJS與現有的JavaScript庫和框架是兼容的，可以自由的實驗使用。這裏有一些經典的例子：
Cesium and webpack（教程）演示了使用webpack捆綁web應用的更高級方法；
Cesium與React集成；
Cesium與ThreeJS集成。
②頁面結構（Page structure）
現在查看index.html文件，由Cesium widget和一些基本輸入元素創建了一個div。需要注意的是，Cesium小部件只是一個普通的div，可以像其它任何div一樣進行樣式化和交互。
這裏有一些關鍵行來設置它：
包含CesiumJS（Include CesiumJS）
首先，在HTML頭文件script標籤中包含Cesium.js，這樣定義了Cesium對象，其包含整個CesiumJS庫。
1. <script src="ThirdParty/Cesium/Cesium.js"></script>
你可以隨意從Cesium源碼ThirdParty/Cesium/Source中，包含單獨的模塊。對於生產應用程序這是首選的，因爲這樣減少了部署應用程序的總體大小。爲了簡單靈活使用API實驗，這裏我們包含了整個模塊。
結構化HTML（Structure the HTML）
在HTML body體中，爲Cesium Viewer widget觀察器部件創建了一個div。
1. <div id="cesiumContainer"></div>
爲了包含激活Cesium觀察器的應用程序代碼，在另一種腳本標記中，我們在HTML主體的末尾添加了應用程序的JavaScript。
1. <script src="Source/App.js"></script>
增加樣式（Add styling）
讓我們給應用程序的html元素增加一些樣式。這裏，我們創建了一個index.css文件，並增加到元素中。這樣允許我們樣式化自己的html，以及Cesium觀察器中任何html覆蓋。（this will allow us to style our own html,as well as any html overlays within our Cesium Viewer.）
1. <link rel="stylesheet" href="index.css" media="screen">
Cesium附帶的部件收集器需要以下的CSS，並且在我們自己的CSS之前包含它。
1. @import url(ThirdParty/Cesium/Widgets/widgets.css);
之後，我們對html div元素進行了一些css樣式化。附加的樣式被增加來覆蓋默認的Cesium CSS。
工作流程（The Workflow）
跟隨本教程學習：
1.使用你喜歡的文本編輯器，打開Sourse/App.js，刪除裏面的內容；
2.複製Source/AppSkeleton.js的內容到Source/App.js；
3.確保你的服務仍然運行在cesium-workshop文件夾，如Setup（安裝）敘述的那樣；
4.打開你喜歡的web瀏覽器，導航到localhost:8080。我們多數使用Chrome，但是Cesium可以運行在所有現代web瀏覽器中。應該可以看到一個幾乎黑色的頁面；
5.正如本教程指導的那樣，去掉代碼註釋，保存Source/App.js，刷新頁面可以看到修改的變化。
Really stuck？你可以在sandcastle中使用簡化版的應用程序（沒有UI）：
完整代碼
註釋代碼
現在，讓我們開始吧！
(3)創建觀察器(Creating the Viewer)
任何Cesium應用的基礎是Viewer（觀察器），這是一個交互式3D球，具有許多開箱即用的功能。創建一個viewer，並附加到id爲“cesiumContainer”的div上，代碼如下：
1. var viewer = new Cesium.Viewer('cesiumContainer');
這樣的一行代碼包含了很多內容！你應該可以看到一個基本的球，如：
8 基礎球
默認情況下，應用場景可以處理鼠標和觸摸輸入。使用默認的相機控制設計，嘗試去瀏覽這個球。
單擊鼠標左鍵並拖動-鏡頭移動到地球表面；（拖動地球旋轉）
單擊鼠標右鍵並拖動-相機放大或者縮小；（放大或縮小球）
滾動中間齒輪-也是相機放大或縮小；（放大或縮小球）
點擊中間齒輪並拖動-相機圍繞球表面點旋轉
默認情況下，除球自己之外，觀察器還附帶一些有用的小部件。
1.Geocoder：位置搜素工具，使相機飛到查詢的位置，默認情況下使用Bing Maps；
2.HomeButton：使觀察器飛回默認的視角；
3.SceneModelPicker：在3D、2D和Columbus View(CV)模式之間切換；
4.BaseLayerPicker：選擇球上顯示的影像和地形；
5.NavigationHelpButton：顯示默認的相機控制；
6.Animation：控制視圖動畫播放速度；
7.CreditsDisplay：顯示數據歸屬性，幾乎總是需要；
8.Timeline：指示當前時間並允許用戶使用刷子跳轉到特定時間；
9.FullscreenButton：全屏顯示。
我們可以在創建觀察器時將options對象作爲參數傳入，從而使觀察器的配置包含或排除這些特徵，以及更多的特性。爲了實現這種應用，刪除第一行，並通過取消下面幾行註釋來配置一個新的觀察器：
1. var viewer = new Cesium.Viewer('cesiumContainer', {
2. scene3DOnly: true,
3. selectionIndicator: false,
4. baseLayerPicker: false
5. });
這將創建一個沒有選擇指示器、基層選擇器或場景模式選擇器小部件的觀察器，因爲這些對於我們的應用程序來說不是必要的。對於整個Viewer選項參數，可以查看Viewer文檔。
(4)銫粒子(Cesium ion)
Cesium ion銫粒子是一個平臺，其平鋪（tiling）和託管三維地理空間數據，然後你可以將其添加到自己的CesiumJS應用程序中。這兒，我們將使用哨兵-2（Sential-2）影像和Cesium全球地形，它們都託管在ion中。
爲了能使用上面提到的數據和其它地形和影像數據資源，第一步我們首先通過註冊一個免費的Cesium ion賬號，進而得到一個訪問令牌（access token）。
訪問https://cesium.com/ion/，創建一個賬號或者用之前的賬號登錄進ion。
點擊“Access Tokens”，導航到Access Token page頁面。
找到你的“Default”默認access token並複製。
在創建Cesium觀察器代碼段之前添加下面一行，並用自己的訪問令牌替換掉。
1. Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';
這將使應用程序可以訪問銫粒子中的所有資源。
更多關於上傳和處理個人數據的信息，可以查看Cesium ion入門指南。
(5)增加影像(Adding Imagery)
下一個Cesium應用程序關鍵元素是影像，這是一組影像，以不同分辨率拼貼在虛擬地球上。依靠於相機視角和離地球表面的距離，Cesium將以不同細節級別（或變焦級別）請求和渲染圖像塊。
可以添加、刪除、排序和調整多個圖像層。
Cesium提供了許多種處理圖層方法，例如顏色調整和圖層混合。代碼示例如下：
增加基礎影像（Adding basic imagery）
調整影像顏色（Adjusting imagery colors）
操作和排序影像層（Manipluating and ordering imagery layers）
拆分影像層（Splitting imagery layers）
Cesium爲許多不同供應商的開箱即用圖像提供支持。
支持的影像格式：
WMS
TMS
WMTS(with time dynamic imagery)
ArcGIS
Bing Maps
Google Earth
Mapbox
Open StreetMap
注意：特別小心哦，不同數據提供商有不同的屬性要求-確保你擁有使用特定提供商數據的權限，並使用credit信用選項對相應源進行屬性設置。
默認情況下，Cesium使用Bing Maps影像。觀察器打包的圖像主要用於演示目的，Cesium要求你創建一個ion賬戶，並生成一個訪問key來使用影像。
這裏的演示，我們在Cesium ion中使用哨兵2（Sentinel-2）影像。
首先，進入Cesium ion並增加哨兵2（ Sentinel-2）影像到自己的資源中。點擊導航條的“資源倉庫”（Asset Depot）到資源倉庫頁面（Asset Depot page）
點擊“Add to my assets”，當你打開“My Assets”時可以看到Sentinel-2數據在資源列表中，並且是可以用的，現在就可以在我們的應用程序中使用。
首先，創建一個IonImageryProvider，傳入對應Sentinel-2影像的資源ID（assetID）。然後增加ImageryProvider到viewer.imageryLayers。
1. // Remove default base layer
2. viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
3.
4. // Add Sentinel-2 imagery
5. viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));
添加上面的代碼，當你放大我們的應用時看起來像下面的樣子：
注意：更多有關影像的信息，可以查看影像圖層教程（Imagery Layers Tutorial）。
(6)增加地形(Adding Terrain)
Cesium支持流媒體和可視化全球高分辨率地形和海洋、湖泊和河流的水影響。山頂、山谷和其它地形特徵與2D地圖相比表現出了3D球的優點。與影像一樣，Cesium引擎將從服務器上傳輸地形數據，只根據當前相機位置請求和呈現需要的瓦片數據。
這裏有一些地形數據集和配置選項的演示：
ArcticDEM：高分辨率北極地形；
PAMAP Terrain：高分辨率賓夕法尼亞地形；
Terrain display options：地形配置選項和格式；
Terrain exaggeration：使地形高差更加顯著。
支持的地形格式：
Quantized-mesh，Cesium團隊開發的開源格式；
Heightmap 高程圖；
Google Earth Enterprise谷歌地球企業版
爲了增加地形數據，我們創建一個CesiumTerrainProvider，指定一個url和一些配置選項，然後將其賦值給viewer.terrainProvider。
這裏我們使用託管在Cesium ion的Cesium世界地形（Cesium World Terrain）瓦片集，它們默認包含在我的資源中（“My Assets”）。在這種情況下，我們可以使用createWorldTerrain幫助函數來創建託管在Cesium ion中的Cesium世界地形（Cesium World Terrain）tileset。
1. // Load Cesium World Terrain
2. viewer.terrainProvider = Cesium.createWorldTerrain({
3. requestWaterMask : true, // required for water effects
4. requestVertexNormals : true // required for terrain lighting
5. });
requestWaterMask和requestVertexNormals是可選的配置選項，這些選項告知Cesium請求額外的水和燈光效果數據，默認情況下它們設置爲false。
最後，現在我們已經有了地形，只需要多一行就可以確保地形後面的對象被正確的遮擋。只有最前端的對象是可以看見的。
1. // Enable depth testing so things behind the terrain disappear.
2. viewer.scene.globe.depthTestAgainstTerrain = true;
我們現在有地形的水動畫。紐約是相當的平坦，所以可以自由去探索，以發現新的地形活動。舉個特別明顯的例子，你可以導航到更崎嶇的地區，比如大峽谷或舊金山。
注意：關於更多地形信息，可以查看Cesium地形教程（Terrain Tutorial）。