搭建好cesium環境之后
在項目中找到helloworld.html頁面

這里面只有var viewer = new Cesium.Viewer(‘cesiumContainer’);這一段代碼
我們可以對其進行設置
具體可以參考官方的API
我這里就直接使用zlx312博客中的這一部分說明

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() //需要進行可視化的數據源的集合 } );

cesium中提供了三種設置View的方式 ：setView，flyto，lookAt
我們這里使用的是setView 其他的兩種可以查看下方鏈接，里面有詳細教程
http://cesium.xin/wordpress/archives/261.html
下面是設置初始化的視圖的位置，鏡頭以及視角
（116.427674,39.977968）為經緯度也就是位置，
獲取地方經緯度可以在http://api.map.baidu.com/lbsapi/getpoint/index.html
中點擊自己想要選擇的位置就可以看到經緯度
10000代表的是高度為一萬公里
-90為傾斜角度
下面的heading、pitch和roll就是鏡頭相對于xyz軸的角度

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) }});

這樣就可以運行測試。
但在運行之后打開helloworld頁面發現是空白
于是在借鑒zlx312博客中的那一部分中找到如下代碼

imageryProvider : new Cesium.OpenStreetMapImageryProvider( { credit :'', url : '//192.168.0.89:5539/planet-satellite/' } ),

將其修改為以下幾種中的一種就可以了
1、加載arcgis數據——ArcGisMapServerImageryProvider

var viewer = new Cesium.Viewer("cesiumDiv",{imageryProvider:new Cesium.ArcGisMapServerImageryProvider({url:'http://atlasmaps.esri.com/arcgis/rest/services/Esri/USA_Population_Density/MapServer',enablePickFeatures:false}),baseLayerPicker:false　　//這句不加可能會出錯 });

2、加載OSM數據——createOpenStreetMapImageryProvider

var viewer = new Cesium.Viewer("cesiumDiv",{imageryProvider:new Cesium.createOpenStreetMapImageryProvider({url:'https://a.tile.openstreetmap.org/'}),baseLayerPicker:false });

3、加載MapBox數據——MapboxImageryProvider

var viewer = new Cesium.Viewer("cesiumDiv",{imageryProvider:new Cesium.MapboxImageryProvider({mapId:'mapbox.satellite'}),baseLayerPicker:false });

4、加載離線的影像服務——SingleTileImageryProvider
在Provider上多做一些文章，比如搞一張透明的圖片，達到一些虛幻的效果，

或者在近地面實現一種類似平面的瀏覽效果，畢竟2D和3D在相機，數據單位上是有區別的。

比如隱藏地球主體后，疊加一些矢量面，突出主題.

var viewer = new Cesium.Viewer("cesiumDiv",{skyBox:false,skyAtmosphere:false,baseLayerPicker:false,imageryProvider:new Cesium.SingleTileImageryProvider({url:'globe.jpg'}),contextOptions:{webgl:{alpha:true}} });

最后效果如下

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Cesium之初始化视图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。