Cesium之初始化视图

搭建好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
                }
            }
});

最后效果如下