1. 概述
Cesium支持加載影像圖層，主要是各種地圖服務。這里就通過Cesium實現添加影像地圖和中文注記。
2. 實例
2.1. ImageryLayers.html
HTML的代碼比較簡單，主要還是導入了組件cesium.js及其樣式表widgets.css,兩者都來自於cesium源代碼；然后創建了一個名為cesiumContainer的div圖層，並設定其樣式；最后是導入了自己寫的JS代碼ImageryLayers.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Create imagery layers from multiple sources.">
<meta name="cesium-sandcastle-labels" content="Beginner, Tutorials, Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" 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;
font-family: sans-serif;
background: #000;
}
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<script src="ImageryLayers.js"></script>
</body>
</html>
2.2. ImageryLayers.js
2.2.1. 代碼
//Add your ion access token from cesium.com/ion/
Cesium.Ion.defaultAccessToken = '你申請的key';
'use strict';
//默認BING影像地圖
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL
}),
baseLayerPicker: false
});
//全球影像中文注記服務
var imageryLayers = viewer.scene.imageryLayers;
var tdtAnnoLayer = imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=d99ffacb3eeafd378927c060ab39bdab",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
}));
//tdtAnnoLayer.alpha = 0.5;
//tdtAnnoLayer.brightness = 2.0;
imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(113.6833, 29.99667, 115.0833, 31.51667)
}));
2.2.2. 解析
默認情況下，當創建Cesium.Viewer的時候，就包含了一個在線Bing影像地圖圖層，顯式的創建形式如下：
//默認BING影像地圖
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL
}),
baseLayerPicker: false
});
函數Cesium.createWorldImagery()可以直接創建帶標注的圖層，只要把這里的AERIAL修改為AERIAL_WITH_LABELS即可。可惜這里的標注是英文標注。
可以通過天地圖來實現中文注記功能，天地圖采用的是OGC的WMTS標准，Cesium中正好提供了相應的接口Cesium.WebMapTileServiceImageryProvider():
//全球影像中文注記服務
var imageryLayers = viewer.scene.imageryLayers;
var tdtAnnoLayer = imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=您的密鑰",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
}));
//tdtAnnoLayer.alpha = 0.5;
//tdtAnnoLayer.brightness = 2.0;
可以看到新建的圖層被添加到當前場景scene的圖層集合對象readonlyimageryLayers中，它是一個Cesium.ImageryLayerCollection對象，用來管理圖層對象Cesium.ImageryLayer。通過這個對象，可以設置當前圖層的透明度、亮度、對比度等，對於圖層的融合特別有用：
除此之外，還可以直接把一張本地（域內）的圖片作為圖層添加到特定的位置，是通過另外一個創建Cesium.ImageryLayer的接口Cesium.SingleTileImageryProvider()實現的：
imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(113.6833, 29.99667, 115.0833, 31.51667)
}));
3. 結果
在瀏覽器運行，得到影像地圖和中文標注：
本地的圖片被放到特定的位置，我這里放到了武漢市附近：
這個示例一定要注意Cesium自帶的Bing地圖和天地圖都要申請對應的key才能正常顯示，這里我把我自己申請的key略去了。