欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-01-01 14:30:28
...

一、影像

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

hs -p 8082

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

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

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

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

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

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

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

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

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

效果如下

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

二、地形,参数TerrainProvider

之前默认为平面

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

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

var guge=new Cesium.UrlTemplateImageryProvider({            	
			url:'http://www.google.cn/maps/aaa@qq.com&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
	    	})
		})

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

三、设置视角

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

		var guge=new Cesium.UrlTemplateImageryProvider({            	
			url:'http://www.google.cn/maps/aaa@qq.com&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
    		}
		})

 

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

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

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

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

二、Cesium加载影像,地形、设置视角代码如下

		var guge=new Cesium.UrlTemplateImageryProvider({            	
			url:'http://www.google.cn/maps/aaa@qq.com&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                           
    		}
		})

 

相关标签: Cesium

上一篇:

下一篇: