Cesium之【高度】量算

博客涉及Cesium和JavaScript相关内容,重点在于量算功能。Cesium是信息技术领域的工具,结合JavaScript可实现特定量算操作,在相关开发场景有应用价值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//****************************高度测量 第一个点的经纬度,第二个点的高度,两点水平距离为半径************************************************//
 var measureHeight = function (viewer, handler){		
		handler_g = handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);	
		var positions = [];
		var poly = null;
		var tooltip = document.getElementById("toolTip");
		var height = 0;
		var cartesian = null;
		var floatingPoint;
		tooltip.style.display = "block";
		
		handler.setInputAction(function(movement){
			tooltip.style.left = movement.endPosition.x + 3 + "px";
			tooltip.style.top = movement.endPosition.y - 25 + "px";
			tooltip.innerHTML ='<p>单击开始,双击结束</p>';
			cartesian = viewer.scene.pickPosition(movement.endPosition); 
			
			console.log(positions);
			if(positions.length >= 2){
				if (!Cesium.defined(poly)) {
					poly = new PolyLinePrimitive(positions);
				}else{
					positions.pop();					
					positions.push(cartesian);
				}
				height = getHeight(positions);				
			}
		},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
		
		handler.setInputAction(function(movement){
			tooltip.style.display = "none";
			
			cartesian = viewer.scene.pickPosition(movement.position); 
	
			if(positions.length == 0) {
				positions.push(cartesian.clone());
				positions.push(cartesian);

				floatingPoint_g = floatingPoint = viewer.entities.add({
				parent:measure_entities,
				name : '高度',
				position : positions[0],				
				point : {
					pixelSize : 5,
					color : Cesium.Color.RED,
					outlineColor : Cesium.Color.WHITE,
					outlineWidth : 2,
					heightReference:Cesium.HeightReference.none 
					},
				label : {
					text : "0米",
					font : '18px sans-serif',
					fillColor : Cesium.Color.GOLD,
					style: Cesium.LabelStyle.FILL_AND_OUTLINE,
					outlineWidth : 2,
					verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
					pixelOffset : new Cesium.Cartesian2(20, -40)
					}
				});
			}						
			
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
		 
		handler.setInputAction(function(movement){
			handler.destroy();
			//positions.pop();//清除移动点			
			tooltip.style.display = "none";
			//viewer_g.entities.remove(floatingPoint);
			// console.log(positions);
			//在三维场景中添加Label
			
			var textDisance = height + "米";
							
			var point1cartographic = Cesium.Cartographic.fromCartesian(positions[0]);
			var point2cartographic = Cesium.Cartographic.fromCartesian(positions[1]);					
			var point_temp= Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(point1cartographic.longitude), Cesium.Math.toDegrees(point1cartographic.latitude),point2cartographic.height);	
			

			viewer.entities.add({
				parent:measure_entities,
				name : '直线距离',
				position : point_temp,			
				point : {
					pixelSize : 5,
					color : Cesium.Color.RED,
					outlineColor : Cesium.Color.WHITE,
					outlineWidth : 2,
					heightReference:Cesium.HeightReference.none 
				},
				label : {
					text : textDisance,
					font : '18px sans-serif',
					fillColor : Cesium.Color.GOLD,
					style: Cesium.LabelStyle.FILL_AND_OUTLINE,
					outlineWidth : 2,
					verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
					pixelOffset : new Cesium.Cartesian2(20, -20)
				}
			});		
		}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK );		
	
		function getHeight(_positions){
			var cartographic = Cesium.Cartographic.fromCartesian(_positions[0]);
			var cartographic1 = Cesium.Cartographic.fromCartesian(_positions[1]);
			var height_temp = cartographic1.height - cartographic.height;				
			return height_temp.toFixed(2);    			
		}
	
		var PolyLinePrimitive = (function(){
			function _(positions){
				this.options = {
					parent:measure_entities,
					name:'直线',
					polyline : {					
						show : true,
						positions : [],
						material : Cesium.Color.AQUA    ,
						width : 2						
					},
					ellipse : {
						show : true,
						// semiMinorAxis : 30.0,
						// semiMajorAxis : 30.0,
						// height: 20.0,
						material : Cesium.Color.GREEN.withAlpha(0.5),
						outline : true // height must be set for outline to display
					}
				};
				this.positions = positions;
				this._init();
			}
		
			_.prototype._init = function(){
				var _self = this;
				var _update = function(){	
					var temp_position =[];
					temp_position.push( _self.positions[0]);
					var point1cartographic = Cesium.Cartographic.fromCartesian(_self.positions[0]);
					var point2cartographic = Cesium.Cartographic.fromCartesian(_self.positions[1]);					
					var point_temp= Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(point1cartographic.longitude), Cesium.Math.toDegrees(point1cartographic.latitude),point2cartographic.height);			
					temp_position.push(point_temp);
					console.log(temp_position);
					return temp_position;
				};
				var _update_ellipse = function(){					
					return _self.positions[0];
				};
				var _semiMinorAxis = function(){
					var point1cartographic = Cesium.Cartographic.fromCartesian(_self.positions[0]);
					var point2cartographic = Cesium.Cartographic.fromCartesian(_self.positions[1]);
					/**根据经纬度计算出距离**/
					var geodesic = new Cesium.EllipsoidGeodesic();
					geodesic.setEndPoints(point1cartographic, point2cartographic);
					var s = geodesic.surfaceDistance;
					return s;
				};
				var _height =  function(){
					var height_temp = getHeight(_self.positions);
					return height_temp;
				};
				//实时更新polyline.positions
				 this.options.polyline.positions = new Cesium.CallbackProperty(_update,false);
				this.options.position = new Cesium.CallbackProperty(_update_ellipse,false);
				this.options.ellipse.semiMinorAxis =new Cesium.CallbackProperty(_semiMinorAxis,false);
				 this.options.ellipse.semiMajorAxis = new Cesium.CallbackProperty(_semiMinorAxis,false);
				this.options.ellipse.height =  new Cesium.CallbackProperty(_height,false);
				viewer.entities.add(this.options);
			};
		
			return _;
		})();
	};

 

<think>我们正在讨论Cesium中地形高度数据的获取和高度。根据用户需求,我们将分步骤说明如何实现。步骤1:获取地形高度数据Cesium中地形数据通常通过地形提供器(TerrainProvider)加载。最常用的是Cesium全球地形(CesiumWorldTerrain),但也可以使用其他地形服务或本地地形数据。加载地形后,我们可以使用Cesium的sampleTerrain函数来获取特定位置的地形高度。注意:地形高度是相对于椭球面的高度(即海拔高度)。步骤2:进行高度高度通常包括获取某点的海拔高度、两点的高度差等。我们可以通过以下方式实现:a.获取单个点的地形高度:使用sampleTerrain函数。b.计两点间的高度差:分别获取两点的高度,然后相减。示例代码:1.初始化地形提供器2.定义需要查询的点(经纬度)3.使用sampleTerrain函数获取这些点的地形高度4.进行高度注意:sampleTerrain函数是异步的,因此需要在回调中处理高度数据。示例代码:```javascript//创建Viewervarviewer=newCesium.Viewer('cesiumContainer',{terrainProvider:Cesium.createWorldTerrain()});//定义两个点(经纬度,高度暂时设为0)varpositions=[Cesium.Cartographic.fromDegrees(longitude1,latitude1),Cesium.Cartographic.fromDegrees(longitude2,latitude2)];//设置地形细节级别(通常设为最大级别)varlevel=11;//异步获取地形高度Cesium.sampleTerrain(viewer.terrainProvider,level,positions).then(function(updatedPositions){//更新后的位置数组,每个位置的高度已更新为地形高度(单位:米)varheight1=updatedPositions[0].height;varheight2=updatedPositions[1].height;//计高度差varheightDifference=Math.abs(height1-height2);console.log("点1的高度:"+height1+"米,点2的高度:"+height2+"米,高度差:"+heightDifference+"米");});```注意事项:-由于地形数据是异步加载的,因此sampleTerrain函数返回一个Promise,需要在then回调中处理结果。-如果查询的区域地形数据尚未加载完成,可能需要等待一段时间。引用说明:在Cesium中,地形高度数据通常通过地形瓦片服务获取。我们使用Cesium内置的sampleTerrain函数可以方便地获取任意点的地形高度[^1]。参考引用:[^1]:Cesium官方文档中关于地形采样的说明:sampleTerrain函数可以获取地形提供器上某一点或多个点的地形高度。该函数需要传入地形提供器、细节级别(LOD)和位置数组(Cartographic经纬度坐标)。返回的Promise将解析为更新了高度值的位置数组。如果用户需要更高级的功能(如计一个区域的平均高度、最高点等),可以结合使用地形提供器和自定义法。例如,可以通过采样多个点,然后进行统计分析。另外,用户还可以使用Cesium的TerrainData类直接获取地形瓦片数据,但这需要更底层的操作,一般使用sampleTerrain即可满足需求。根据引用[1]中的面积测量方法,我们可以联想到地形高度测量也是地理空间计的基础。而引用[2]中提到了基于地形数据制作水体模型,其中涉及了地形高度的应用(如设置水体高度为地形最高点+100米)。因此,获取地形高度是进行这些高级操作的前提。相关问题:§§相关问题§§1.在Cesium中如何获取一个区域内的地形最高点和最低点?2.如何计一个多边形区域内的平均地形高度?3.Cesium中除了全球地形服务,还有哪些地形提供器可以使用?</think>### Cesium地形高度指南 在Cesium中获取地形高度数据并进行高度,主要通过地形提供器(TerrainProvider)和采样函数实现。以下是具体实现步骤: #### 1. **地形数据加载** Cesium通过地形提供器访问地形高程数据。常用地形服务包括: ```javascript // 使用Cesium全球地形服务 viewer.terrainProvider = Cesium.createWorldTerrain(); // 或使用ArcGIS地形服务 viewer.terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({ url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer" }); ``` #### 2. **获取单点高度** 使用`sampleTerrain`函数获取特定坐标的高度: ```javascript // 定义目标点(经纬度坐标) const position = Cesium.Cartographic.fromDegrees(longitude, latitude); // 采样地形高度 Cesium.sampleTerrain( viewer.terrainProvider, 11, // 地形细节级别 [position] ).then(updatedPositions => { const height = updatedPositions[0].height; // 获取海拔高度(米) console.log(`经度: ${longitude}, 纬度: ${latitude}, 高度: ${height}米`); }); ``` #### 3. **区域高度分析** ##### (1) 网格化采样 ```javascript const samples = []; const step = 0.01; // 经纬度步长 // 生成采样网格 for (let lat = minLat; lat <= maxLat; lat += step) { for (let lon = minLon; lon <= maxLon; lon += step) { samples.push(Cesium.Cartographic.fromDegrees(lon, lat)); } } // 批采样 Cesium.sampleTerrain(viewer.terrainProvider, 11, samples).then(results => { const heights = results.map(p => p.height); const maxHeight = Math.max(...heights); const minHeight = Math.min(...heights); const avgHeight = heights.reduce((a,b) => a+b, 0)/heights.length; }); ``` ##### (2) 地形剖面分析 ```javascript // 创建两点间路径 const path = []; for (let i=0; i<=100; i++) { const lon = startLon + (endLon - startLon)*i/100; const lat = startLat + (endLat - startLat)*i/100; path.push(Cesium.Cartographic.fromDegrees(lon, lat)); } // 获取路径高程 Cesium.sampleTerrain(viewer.terrainProvider, 11, path).then(elevations => { // 生成高程剖面图数据 const profile = elevations.map((p, i) => ({ distance: i * Cesium.Cartesian3.distance(startPoint, endPoint)/100, height: p.height })); }); ``` #### 4. **关键技术点** 1. **坐标系转换** 所有坐标需先转为`Cartographic`(经度/纬度/高度)格式 ```javascript Cesium.Cartographic.fromCartesian(cartesianPosition) ``` 2. **地形细节级别(LOD)** `sampleTerrain`的第二个参数控制采样精度(0-14级),值越高精度越高但计越慢 3. **异步处理** 地形采样返回Promise对象,需使用`.then()`或`async/await`处理结果 4. **地形可用性检查** ```javascript if (!viewer.terrainProvider.availability) { console.error("地形数据不可用"); } ``` #### 5. **应用场景** - 洪水淹没分析(如确定水位线以上区域) - 无人机航线高度规划 - 地质高程变化监测 - 三维模型与地形匹配(如引用[2]中的水体模型制作) > **注意事项**:实际地形高度精度取决于使用的地形数据源,Cesium全球地形精度约15-30米,专业测绘数据可达亚米级精度[^1]。 ---
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值