參考資料：
https://cesiumjs.org/tutorials/Cesium-Workshop/
https://github.com/geoadmin/workshop-cesium3d
https://github.com/AnalyticalGraphicsInc/cesium-workshop
概述
通過該教程籍铁，能夠大致了解Cesium的功能蛛倦，包括：
- 配置1個Cesium viewer
- 加載各種數(shù)據(jù)集
- 創(chuàng)建幾何和設置樣式
- 加載3D Tiles
- 控制相機
- 添加鼠標交互
1. 設置和準備工作
設置
- 確認你的瀏覽器支持Cesium
- 確認已安裝Node.js
- 下載代碼
$ git clone https://github.com/AnalyticalGraphicsInc/cesium-workshop - 切換到cesium-workshop根目錄
- 使用node.js服務運行web應用
$ npm install
$ npm start
Cesium development server running locally. Connect to http://localhost:8080
也可以使用python簡易HTTP服務程序運行該web應用:
// Python2
$ python -m SimpleHTTPServer 8080
// Python3
$ python -m http.server 8080
打開瀏覽器离唬，輸入地址： http://localhost:8080
app目錄簡介：
- index.html - 主頁面. 在本地web server中部署梯轻，打開該文件就可以運行示例程序.
- Source - 包括index.html中引用的App.js, 這是app的代碼所在位置.
- ThirdParty - 第三方庫，這里只有CesiumJS庫.
- server.js - 簡單node.js 服務器程序冗恨，用于運行程序.
- package.json - node.js 服務器的依賴庫.
- LICENSE - 授權信息答憔，Apache 2.0.
- .gitignore - git倉庫中不包括的文件列表.
CesiumJS與現(xiàn)有JavaScript庫和框架兼容，如:
- Cesium + webpack - 給出了使用webpack打包web應用的教程.
- Cesium + React
- Cesium + ThreeJS
頁面結構：
index.html: Cesium widget本身是1個div,關鍵代碼包括：
包含CesiumJS掀抹，定義Cesium對象
<script src="ThirdParty/Cesium/Cesium.js"></script>
也可以在生產(chǎn)環(huán)境僅僅包含Cesium的某個模塊 ThirdParty/Cesium/Source/ , 以便減少應用大小.
為Cesium Viewer widget創(chuàng)建1個div
<div id="cesiumContainer"></div>
添加app代碼：
<script src="Source/App.js"></script>
在<head>標簽中添加html元素樣式（使用index.css文件）
<link rel="stylesheet" href="index.css" media="screen">
Cesium自帶系列CSS虐拓，也可以引入
@import url(ThirdParty/Cesium/Widgets/widgets.css);
另外的樣式可以用來覆蓋Cesium的CSS.
流程
- 使用最喜歡的文本編輯器打開
Source/App.js并刪除內容. - 復制
Source/AppSkeleton.js為Source/App.js. - 確認
cesium-workshop服務正在運行 - 線上web瀏覽器和切換到localhost:8080.
- 修改
Source/App.js并刷新頁面
創(chuàng)建viewer
任何Cesium應用的基礎都是Viewer, 一個交互的三維球，創(chuàng)建1個viewer并綁定到id 為"cesiumContainer" 的div上.
var viewer = new Cesium.Viewer('cesiumContainer');
默認情況下傲武，場景能夠處理鼠標和觸控輸入事件蓉驹，如相機控制:
- 鼠標左鍵單擊和拖動 - 在地球表面移動相機.
- 鼠標右鍵單擊和拖動 - 放大、縮小(相機拉近或拉遠)
- 鼠標中鍵滾輪 - 放大揪利、縮小
- 鼠標中鍵單擊和拖動 - 以地球表面某個點旋轉相機
觸控事件：
- 一個手指拖曳- 平移視圖(One finger drag - Pan view)
- 兩個手指捏放- 縮放視圖(Two finger pinch - Zoom view)
- 兩個手指拖曳态兴，相同方向- 俯仰視圖(Two finger drag, same direction - Tilt view)
- 兩個手指拖曳，相反方向- 旋轉視圖(Two finger drag, opposite direction - Rotate view)
除球外疟位，Viewer還默認提供了一些widget.
默認的Cesium Viewer
-
地名搜索: 地名搜索工具瞻润，相機飛行到查詢地點. 默認使用Bing Maps數(shù)據(jù). -
默認視圖: 視圖復位，回到默認視圖. -
場景模式: 切換模式3D, 2D 或2.5D (Columbus View). -
基礎圖層: 選擇影像或地形圖層. -
幫助: 幫助甜刻，提供默認相機控制方法. -
動畫: 控制動畫播放速度. -
鳴謝: 顯示數(shù)據(jù)歸屬. -
時間線: 指示當前時間绍撞，允許用戶跳到指定時間. -
全屏: 全屏.
這些widget的顯示可以在創(chuàng)建Viewer時進行配置,詳細參數(shù)見Viewer文檔：
var viewer = new Cesium.Viewer('cesiumContainer', {
scene3DOnly: true,
selectionIndicator: false,
baseLayerPicker: false
});
Cesium ion
Cesium ion是一個三維數(shù)據(jù)切片和存儲的平臺，這里使用ion平臺上存儲的Sentinal-2 影像和Cesium World Terrain.
需要訪問https://cesium.com/ion/ 注冊一個免費賬戶得院，并在Access Tokens頁面創(chuàng)建訪問令牌.
Cesium ion默認提供5GB存儲空間.
在創(chuàng)建viewer之前設置訪問令牌：
Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';
添加影像圖層
Cesium支持影像圖層的添加傻铣、刪除、排序祥绞、調整.
每個圖層的亮度(brightness)矾柜、對比度(contrast)阱驾、灰度(gamma)就谜、色相(Hue)怪蔑、 飽和度(Saturation)都支持動態(tài)調整.
Cesium提供影像圖層操作的很多方法，包括顏色調整(color adjustment)丧荐、圖層混合(layer blending)等. 代碼示例：
Cesium提供了多個影像圖層提供者缆瓣，包括：
- WMS - OGC標準，WebMapServiceImageryProvider
- TMS - 訪問地圖瓦片的REST接口虹统，可以使用MapTiler or GDAL2Tiles. I
生成弓坞，參見createTileMapServiceImageryProvider - WMTS(with time dynamic imagery) -OGC標準， WebMapTileServiceImageryProvider
- ArcGIS - ArcGIS Server REST API 车荔，見 ArcGisMapServerImageryProvider
- Bing Maps -Bing Maps REST Services
渡冻，需要Bing Maps key, BingMapsImageryProvider - Google Earth -Google Earth Enterprise server發(fā)布的數(shù)據(jù)， 見GoogleEarthEnterpriseImageryProvider
- Mapbox - 需要token, MapboxImageryProvider
- Open Street Map -訪問OSM或Slippy map tiles
忧便，參見 createOpenStreetMapImageryProvider - Cesium Ion平臺 - IonImageryProvider
其他內置影像圖層提供者
- GridImageryProvider
- ImageryProvider
- SingleTileImageryProvider - 從一張圖片中創(chuàng)建瓦片
- TileCoordinatesImageryProvider
-
UrlTemplateImageryProvider - 自定義瓦片切片方案族吻，如
//cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg.
當然，也可以通過實現(xiàn)[ImageryProvider接口 定義新的影像接入方式珠增。以 SingleTileImageryProvider 為例簡要介紹：
-
url- 圖片的url t. Like many imagery providers, this is the only required property. In other imagery providers this url points to the server or the root url of the service. -
extent- An optional longitude-latitude rectangle that the image should cover. The default is to cover the entire globe. -
credit- An optional string crediting the data source, which is displayed on the canvas. Some imagery providers, like BingMapsImageryProvider and ArcGIS Server REST API, get a credit logo or string directly from their service. -
proxy- An optional proxy to use for requests to the service, which brings us to Cross-Origin Resource Sharing.
- Tile coordinates - Shows how the globe is divided into tiles in a particular tiling scheme by drawing a border around each tile and labeling it with its level, X, and Y coordinates.
示例 - 使用Ion平臺的Sentinel-2影像：
// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));
示例 - 加載ArcGIS Rest影像,打開Hello_world超歌，使用以下代碼更換：
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}),
baseLayerPicker : false
});
示例 - 添加TMS影像
var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
url : '//cesiumjs.org/tilesets/imagery/blackmarble',
maximumLevel : 8,
credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));
//調整影像圖層透明度、亮度
blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.
blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.
示例 - 添加單個圖片(給定角點坐標)
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));
完整代碼：
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}),
baseLayerPicker : false
});
var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
url : '//cesiumjs.org/tilesets/imagery/blackmarble',
maximumLevel : 8,
credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));
blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.
blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));
