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

忘是亡心i 2023-06-05 12:51 20阅读 0赞

一、影像

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

hs -p 8082

然后访问[http://192.168.1.155:8082/index][http_192.168.1.155_8082_index]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 2][]

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

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 3][]

二、地形，参数TerrainProvider

之前默认为平面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 5][]

三、设置视角

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 6][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 7][]代码如下

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

[http_192.168.1.155_8082_index]: http://192.168.1.155:8082/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20230601/91b860815c81459785bd735ffa165d6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 1]: /images/20230601/f13e3192d5d84ef388fbbfbbc5f1c7aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 2]: /images/20230601/6c112668feb7422eaa40425a538fdd8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 3]: /images/20230601/928c8600621542748bd5e201c2aab1ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 4]: /images/20230601/a19d6aa70e134d959225f0f0c265cc65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 5]: /images/20230601/2bdb35a207894f30a2962e1eb4160624.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 6]: /images/20230601/518a1d0fbc304d609d2f45a4aefc896b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70 7]: /images/20230601/510e3f0276c348b78e486be728b03699.png