在今後的一段時間準備寫一系列關於Ceisum的學習教程，Ceisum是一款開源的前端三維api，近幾年比較火。在這裏首先介紹以下如何學習一個新的地圖api，只要是地圖一類的api有一個特點需要一個容器，例如OL或者leaflet等都有一個map容器map中的構造參數，也就是整個地圖框架的核心，其他子類都是爲地圖框架服務，這樣只通過學習map就能快速掌握該地圖api的大概框架，並且抓住重點。在Ceisum中容器就是viewer，下面通過helloCeisum來介紹Viewer容器：
一、html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Ceisum測試</title>
<script src="../script/Cesium-1.56.1/Build/Cesium/Cesium.js"></script>
<link href="../script/Cesium-1.56.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<style>
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script src="../js/index.js"></script>
</body>
</html>
二、js文件
var viewer = new Cesium.Viewer('cesiumContainer', {
animation: true,//是否創建動畫小器件，左下角儀表
baseLayerPicker: false,//是否顯示圖層選擇器
fullscreenButton: true,//是否顯示全屏按鈕
geocoder: true,//是否顯示geocoder小器件，右上角查詢按鈕
homeButton: true,//是否顯示Home按鈕
infoBox: false,//是否顯示信息框
sceneModePicker: true,//是否顯示3D/2D選擇器
selectionIndicator: true,//是否顯示選取指示器組件
timeline: false,//是否顯示時間軸
navigationHelpButton: false,//是否顯示右上角的幫助按鈕
scene3DOnly: true,//如果設置爲true，則所有幾何圖形以3D模式繪製以節約GPU資源
clock: new Cesium.Clock(),//用於控制當前時間的時鐘對象
selectedImageryProviderViewModel: undefined,//當前圖像圖層的顯示模型，僅baseLayerPicker設爲true有意義
//imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker選擇的圖像圖層ProviderViewModel數組
selectedTerrainProviderViewModel: undefined,//當前地形圖層的顯示模型，僅baseLayerPicker設爲true有意義
terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker選擇的地形圖層ProviderViewModel數組
//imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
// url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=申請值",
// layer: "tdtAnnoLayer",
// style: "default",
// format: "image/jpeg",
// tileMatrixSetID: "GoogleMapsCompatible",
// show: false
//}),//圖像圖層提供者，僅baseLayerPicker設爲false有意義
terrainProvider: new Cesium.EllipsoidTerrainProvider(),//地形圖層提供者，僅baseLayerPicker設爲false有意義
skyBox: new Cesium.SkyBox({
sources: {
positiveX: '../script/Cesium-1.56.1/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_px.jpg',
negativeX: '../script/Cesium-1.56.1/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mx.jpg',
positiveY: '../script/Cesium-1.56.1/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_py.jpg',
negativeY: '../script/Cesium-1.56.1/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_my.jpg',
positiveZ: '../script/Cesium-1.56.1/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_pz.jpg',
negativeZ: '../script/Cesium-1.56.1/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mz.jpg'
}
}),//用於渲染星空的SkyBox對象
fullscreenElement: document.body,//全屏時渲染的HTML元素,
useDefaultRenderLoop: true,//如果需要控制渲染循環，則設爲true
targetFrameRate: undefined,//使用默認render loop時的幀率
showRenderLoopErrors: false,//如果設爲true，將在一個HTML面板中顯示錯誤信息
automaticallyTrackDataSourceClocks: true,//自動追蹤最近添加的數據源的時鐘設置
contextOptions: undefined,//傳遞給Scene對象的上下文參數（scene.options）
sceneMode: Cesium.SceneMode.SCENE3D,//初始場景模式
mapProjection: new Cesium.WebMercatorProjection(),//地圖投影體系
dataSources: new Cesium.DataSourceCollection()
//需要進行可視化的數據源的集合
});
var imageLayer = new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=申請值",
layer: "tdtImgBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
});//衛星圖層
var markLayer = new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=申請值",
layer: "tdtImgAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
});//註記圖層
viewer.imageryLayers.addImageryProvider(imageLayer);
viewer.imageryLayers.addImageryProvider(markLayer);
三、效果圖
參考博文：Ceisum.js教程