二、Cesium加载影像，地形、设置视角

一、影像

1、启动api服务，在下载的Cesium解压根目录下的/Build/Documentation下执行

hs -p 8082

然后访问http://192.168.1.155:8082/index

2、搜索viewer,可以看到创建viewer的函数new Cesium.Viewer(container, options)，上一节使用第一个参数，第二个参数是影响显示配置，其中baseLayerPicker默认是true,改为false将不显示页面图标，如下图标，代码

<script type="text/javascript">
		var viewer = new Cesium.Viewer('cesiumContainer', {
			baseLayerPicker: false
		})
	</script>

3、替换影像，百度搜索"Cesium加载谷歌影像",查询进行替换代码如下

var guge=new Cesium.UrlTemplateImageryProvider({            	
			url:'http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}',  
			tilingScheme:new Cesium.WebMercatorTilingScheme(),            	
			minimumLevel:1,            
			maximumLevel:20        
		});

		var viewer = new Cesium.Viewer('cesiumContainer', {
			baseLayerPicker: false,
			imageryProvider: guge
		})

效果如下

二、地形，参数TerrainProvider

之前默认为平面

修改后默认为地形起伏的3D影像，代码

var guge=new Cesium.UrlTemplateImageryProvider({            	
			url:'http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}',  
			tilingScheme:new Cesium.WebMercatorTilingScheme(),            	
			minimumLevel:1,            
			maximumLevel:20        
		});

		var viewer = new Cesium.Viewer('cesiumContainer', {
			baseLayerPicker: false,
			imageryProvider: guge,
			terrainProvider : new Cesium.CesiumTerrainProvider({
	        	url : Cesium.IonResource.fromAssetId(3956),
	        	requestVertexNormals : true
	    	})
		})

三、设置视角

在viewer中搜索camara,点击进入，主要是setView(options)设置视角,和flyTo(options)飞行路径,代码

		var guge=new Cesium.UrlTemplateImageryProvider({            	
			url:'http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}',  
			tilingScheme:new Cesium.WebMercatorTilingScheme(),            	
			minimumLevel:1,            
			maximumLevel:20        
		});

		var viewer = new Cesium.Viewer('cesiumContainer', {
			baseLayerPicker: false,
			imageryProvider: guge,
			terrainProvider : new Cesium.CesiumTerrainProvider({
	        	url : Cesium.IonResource.fromAssetId(3956),
	        	requestVertexNormals : true
	    	})
		})
		viewer.camera.setView({
		    destination : Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1000.0), // (北京)坐标和高度(米)
		    orientation: {
		        heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)  // 北为0度，90指的是向正东方
		        pitch : Cesium.Math.toRadians(-90),    // default value (looking down) // 平视为0度，-90指的是俯视
		        roll : 0.0                             // default value
    		}
		})

 

访问后将默认定位到北京上空，而并非是一个地球

使用地图调好的角度查看当前的参数值进行配置，调好角度、位置，打开F12控制台，打印出参数

viewer.camera.heading
viewer.camera.pitch
viewer.camera.position

代码如下

		var guge=new Cesium.UrlTemplateImageryProvider({            	
			url:'http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}',  
			tilingScheme:new Cesium.WebMercatorTilingScheme(),            	
			minimumLevel:1,            
			maximumLevel:20        
		});

		var viewer = new Cesium.Viewer('cesiumContainer', {
			baseLayerPicker: false,
			imageryProvider: guge,
			terrainProvider : new Cesium.CesiumTerrainProvider({
	        	url : Cesium.IonResource.fromAssetId(3956),
	        	requestVertexNormals : true
	    	})
		})
		viewer.camera.setView({
		    destination : new Cesium.Cartesian3(-1714536.7602386745, 4996614.145192477, 3566237.3590922765), 
		    orientation: {
		        heading : 6.236132643031626, 
		        pitch : -0.5318641536528257,    
		        roll : 0.0                           
    		}
		})