SuperMap iClient3D for WebGL教程（空间分析）- Profile剖面分析

---

剖面分析是指根据指定的剖面线，输出剖面线与地形数据的表面高程沿某条线（截面）的变化，或剖面线所截的模型建筑物、地下管线等的轮廓线。并支持在剖面线图上进行量算和位置查询功能，同时支持将剖面图输出为图片数据保存。该功能适用于地形数据和模型数据。

剖面分析广泛应用于工程选线、设施选址、管线布设、煤矿开采、土地利用规划等方面，例如：

通过剖面分析功能输出地下管线剖面图，通过距离量算功能量算管线直径。

剖面分析可应用于评估道路修建的难度，或对沿指定路径铺设铁路线的可行性进行评估。

开发步骤

1.引用核心样式文件和库文件

<script type="text/javascript" src="./js/require.min.js" data-main="js/main"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">

2.实例化三维球，'cesiumContainer’是三维球所在div的ID，并创建剖面分析对象

var viewer = new Cesium.Viewer('cesiumContainer');
var profile = new Cesium.Profile(scene);

3.加载范例数据，相机定位

var promise = scene.open('http://www.supermapol.com/realspace/services/3D-CBD/rest/realspace');
scene.camera.setView({ 
					destination: Cesium.Cartesian3.fromDegrees(116.4473, 39.9011, 127),
					orientation: {
						heading: 0.2732,
						pitch: -0.1583,
						roll: 0
					}
				});

4.使用DrawHandler绘制工具，绘制目标线段做剖面分析

（1）注册线绘制工具

var handlerLine = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Line);

（2）注册线绘制激活状态事件，目的是线绘制工具激活时，改变鼠标样式，'drawCur’类位于"pretty.css"里面，所以也需要引用这个样式文件

	handlerLine.activeEvt.addEventListener(function(isActive) {
				if(isActive == true) {
					viewer.enableCursorStyle = false;
					viewer._element.style.cursor = '';
					$('body').removeClass('drawCur').addClass('drawCur');
				} else {
					viewer.enableCursorStyle = true;
					$('body').removeClass('drawCur');
				}
			});

（3）注册绘制线时鼠标移动事件，鼠标移动绘制时，会有相关提示，主要实现方法封装在tooltip.js里面

handlerLine.movingEvt.addEventListener(function(windowPosition) {
				if(handlerLine.isDrawing) {
					tooltip.showAt(windowPosition, '<p>右键单击结束绘制</p>');
				} else {
					tooltip.showAt(windowPosition, '<p>点击绘制第一个点</p>');
				}

			});

（4）注册线绘制结束事件，在事件中做剖面分析

handlerLine.drawEvt.addEventListener(function(result) {})

首先获取绘制的线对象，取起始点和终止点，并把点坐标转换为地理坐标

var line = result.object;
var startPoint = line._positions[0];
var endPoint = line._positions[line._positions.length - 1];

var scartographic = Cesium.Cartographic.fromCartesian(startPoint);
var slongitude = Cesium.Math.toDegrees(scartographic.longitude);
var slatitude = Cesium.Math.toDegrees(scartographic.latitude);
var sheight = scartographic.height;

var ecartographic = Cesium.Cartographic.fromCartesian(endPoint);
var elongitude = Cesium.Math.toDegrees(ecartographic.longitude);
var elatitude = Cesium.Math.toDegrees(ecartographic.latitude);
var eheight = ecartographic.height;

//设置剖面分析的开始和结束位置
profile.startPoint = [slongitude, slatitude, sheight];
profile.endPoint = [elongitude, elatitude, eheight];

profile.extendHeight = 40;

然后是设置回调函数，作用在于把剖面分析结果，在canvas中以图片形式渲染出来

profile.getBuffer(function(buffer) {

				var canvas = document.getElementById("pro");
				canvas.height = profile._textureHeight;
				canvas.width = profile._textureWidth;
				var ctx = canvas.getContext("2d");
				var imgData = ctx.createImageData(profile._textureWidth, profile._textureHeight);
				imgData.data.set(buffer);
				//在canvas上绘制图片
				ctx.putImageData(imgData, 0, 0);
				$("#pro").width(600);
				$("#pro").height(450);
			});

最后执行剖面分析即可

profile.build();

效果如下图：

完整Demo可参考SuperMap iClient 3D for WebGL官方在线范例：

http://support.supermap.com.cn:8090/webgl/examples/editor.html#profile