Cesium 學習記錄（2）初始化Viewer

上一節中我進行了Cesium開發環境的搭建，但是我並不需要一整個球呀~所以這一節的內容就是對Cesium的Viewer對象進行初始化，得到地球上我要的那一個地點的地圖，並且對Viewer的組件有一個初步的瞭解。

在上一屆HelloWorld例子中，JS部分是這樣的：

<script>
    var viewer = new Cesium.Viewer('cesiumContainer');
     viewer._cesiumWidget._creditContainer.style.display="none"; 
  </script>

僅僅一句代碼我們就可以加載進來一個地球和各種地圖，但是有很多功能可能是需要關閉或者開啓的~

詳細的設置可以參考如下，這部分內容我沒有再去查API，而是直接引用了GISEarth的博客中的這部分說明，供大家參考。由於我不需要多餘的按鈕，所以我就把Cesium本來帶的組件全部隱藏啦~

var viewer = new Cesium.Viewer( 'cesiumContainer', {  
    animation : false,//是否創建動畫小器件，左下角儀表  
    baseLayerPicker : false,//是否顯示圖層選擇器  
    fullscreenButton : false,//是否顯示全屏按鈕  
    geocoder : false,//是否顯示geocoder小器件，右上角查詢按鈕  
    homeButton : false,//是否顯示Home按鈕  
    infoBox : false,//是否顯示信息框  
    sceneModePicker : false,//是否顯示3D/2D選擇器  
    selectionIndicator : false,//是否顯示選取指示器組件  
    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.OpenStreetMapImageryProvider( {  
        credit :'',  
        url : '//192.168.0.89:5539/planet-satellite/'  
    } ),//圖像圖層提供者，僅baseLayerPicker設爲false有意義  
    terrainProvider : new Cesium.EllipsoidTerrainProvider(),//地形圖層提供者，僅baseLayerPicker設爲false有意義  
    skyBox : new Cesium.SkyBox({  
        sources : {  
          positiveX : 'Cesium-1.7.1/Skybox/px.jpg',  
          negativeX : 'Cesium-1.7.1/Skybox/mx.jpg',  
          positiveY : 'Cesium-1.7.1/Skybox/py.jpg',  
          negativeY : 'Cesium-1.7.1/Skybox/my.jpg',  
          positiveZ : 'Cesium-1.7.1/Skybox/pz.jpg',  
          negativeZ : 'Cesium-1.7.1/Skybox/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()  
    //需要進行可視化的數據源的集合  
} );

對camera進行設置，我們就可以定義初始化時的鏡頭、視角~下面這段代碼就是將鏡頭定位在經緯度爲（111.07，39.05）的地方，高度爲1萬公里，下面的heading、pitch和roll就是鏡頭相對於xyz軸的角度，比如pitch爲-90°而另外兩個爲0時，就是90°向下俯視地球。

		viewer.camera.setView({
	        destination: Cesium.Cartesian3.fromDegrees(111.07, 39.05, 10000),
	        orientation: {
	        	heading : Cesium.Math.toRadians(0),
	  		pitch : Cesium.Math.toRadians(-90),
	  		roll : Cesium.Math.toRadians(0)                          
	        }
	    });

最後得到的就是下圖所示的效果，很多按鈕都被隱藏了，打開時也不再是整個地球，而是隻有我需要的這一小部分，這樣子就更方便後面的操作啦~

ps:如果是沒有學過web的初學者，上面那一大串代碼都放在<script></script>標籤裏就可以啦~當年我是純小白的時候，看到一段一段的代碼也是雲裏霧裏，因爲總是不知道放在哪裏>///<