运行范例

描述

该范例展示如何进行距离、面积、高程等地理信息的量算,并将量算结果实时显示。

代码 (文件格式为 UTF-8)


<html>
	<head>
        <meta http-equiv="x-ua-compatible" content="IE=8"/>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>量算</title>
		<script type="text/javascript" src="SuperMap.Include.js" ></script>
		<script type="text/javascript">
			var scene = null;
			var sceneControl = null;
			var htmlUrl = document.location.host;
			//判断网页的打开方式是本地打开还是通过网络打开
			//不同的打开方式url赋值不同
			if(htmlUrl == "")
			{
				htmlUrl = "http://localhost:8090";
			}
			else
			{
				htmlUrl = "http://" + htmlUrl;
			}
			var sceneUrl = htmlUrl + "/iserver/services/3D-sample/rest/realspace";
			
			function onPageLoad() 
			{
				//初始化三维场景控件
				try
				{
					//初始化三维场景控件实例,参数为包含控件的HTML元素
					sceneControl = new SuperMap.Web.UI.Controls.SceneControl($get("sceneControlDiv"), initCallback, failedCallback);
				}
				catch(e)
				{   
					//若没有安装插件,则抛出该异常
					if (e.name == SuperMap.Web.Realspace.ExceptionName.PlugInNotInstalled) 
					{
						var url = htmlUrl + "/iserver/iClient/for3D/plugin/Setup.exe";
						document.write("<a href='"+url+"'>未检测到 SuperMap iClient3D for  Plugin 插件,请单击此处下载并安装插件。</a>");
						return;
					}
					//若使用非IE浏览器,则抛出该异常
					else if (e.name == SuperMap.Web.Realspace.ExceptionName.BrowserNotSupport) 
					{
						document.write("<p>SuperMap iClient3D for  Plugin 目前仅支持 InternetExplorer 浏览器,请更换浏览器后重新尝试加载本页面。</p>");
						return;
					}
					//抛出其他异常
					else
					{
						alert(e.message);
					}  
				}	
			}

			//控件初始化完成后的回调函数,初始化完成之后才能进行数据加载
			function initCallback() 
			{
				//获取地球控件场景,控件和场景是一对一的捆绑关系
				scene = sceneControl.get_scene();
	
				//指定场景的服务器地址
				var sceneAddress = sceneUrl;

				//指定场景名字
				var sceneName = "scene";

				//打开场景
				scene.open(sceneAddress, sceneName);

				//获取场景中的第一个图层
				var layer3D = scene.get_layer3Ds().get_item("Ground@OlympicGreen");

				if (layer3D != null) 
				{
					//获取图层的地理范围,并飞行到该范围
					var geobound = layer3D.get_bounds();

					scene.get_flyingOperator().flyToBounds(geobound);
				}	
			}

			//控件初始化失败后的回调函数
			function failedCallback() 
			{
				alert("Realspace initialized failed!");
			}
            
			function pan()
			{
				//设置控件的当前操作为漫游
				var panAction = new SuperMap.Web.UI.Action3Ds.Pan(sceneControl);
				sceneControl.set_sceneAction(panAction); 
			}
		
			function measureDis()
			{
				//设置控件的当前操作为距离量算
				var measureDisAction = new SuperMap.Web.UI.Action3Ds.MeasureDistance(sceneControl);
				sceneControl.set_sceneAction(measureDisAction); 
				
				//给距离量算事件和量算结束事件注册回调函数
				sceneControl.addEvent("measureDistance", disHandler);
				sceneControl.addEvent("measureDistanceFinished", disFinishedHandler);
			}
		
			function disHandler(dCurrentDis, dTotalDis) 
			{
				//量算过程中及时的显示量算信息
				document.getElementById("MeasureInfo").innerHTML = "<div>" + "距离:" + dCurrentDis + "米" + "    总距离:"  + dTotalDis +  "米"+"</div>";
			}
		
			function disFinishedHandler(dTotalDis,line3D) 
			{
                scene.get_trackingLayer3D().removeAll();
				//量算结束后显示总的距离信息
				document.getElementById("MeasureInfo").innerHTML = "<div>" + "总距离:"  + dTotalDis +  "米"+"</div>";
                 if (line3D == null) {
			        scene.get_trackingLayer3D().removeAll();
			        return;
			    }

			    for (var i = 0; i < line3D.get_partCount() ; i++) {
			        var point3Ds = line3D.getPart(i);
			        for (var j = 0; j < point3Ds.get_count() ; j++) {
			            var point3D = point3Ds.get_item(j);
			            var geoPoint = new SuperMap.Web.Core.GeoPoint3D(point3D);
			            var feature3D = new SuperMap.Web.Core.Feature3D();
			            var style3D = new SuperMap.Web.Core.Style3D();
			            feature3D.set_geometry(geoPoint);

			            //定义节点颜色
			            style3D.set_markerColor(new SuperMap.Web.Core.Color(255, 0, 255, 225));
			            style3D.set_markerScale(5);
			            feature3D.set_style3D(style3D);
			            scene.get_trackingLayer3D().add(feature3D, 'p');

			            //特殊处理最后一个点
			            if (j == point3Ds.get_count() - 1) {
			                var trackingLayer3D = scene.get_trackingLayer3D();

			                var feature3D = new SuperMap.Web.Core.Feature3D();
			                var geoText3D = new SuperMap.Web.Core.GeoText3D();
			                var textPart3D = new SuperMap.Web.Core.TextPart3D('总距离:' + dTotalDis + '米', point3D);
			                var textStyle3D = new SuperMap.Web.Core.TextStyle3D();

			                geoText3D.addPart(textPart3D);
			                textStyle3D.set_fontScale(0.8);
			                textStyle3D.set_opaqueRate(100);
			                textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(255, 255, 255, 255));
			                textStyle3D.set_bold(true);
			                feature3D.set_geometry(geoText3D);
			                feature3D.set_textStyle3D(textStyle3D);

			              
			                trackingLayer3D.refresh();

			                var index = trackingLayer3D.add(feature3D, 'posx');
			                trackingLayer3D.removeAt(trackingLayer3D.indexOf('pos'));
			            }
			        }
			    }

			    var feature3D_1 = new SuperMap.Web.Core.Feature3D();
			    var style3D_1 = new SuperMap.Web.Core.Style3D();
			    feature3D_1.set_geometry(line3D);

			    //定义线宽
			    style3D_1.set_lineWidth(1);

			    //定义线颜色
			    style3D_1.set_lineColor(new SuperMap.Web.Core.Color(255, 255, 0, 225));
			    style3D_1.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.CLAMP_TO_GROUND);
			    feature3D_1.set_style3D(style3D_1);
			    scene.get_trackingLayer3D().add(feature3D_1, 'p1');
			}
		
			function measureArea()
			{
				//设置控件的当前操作为面积量算
				var measureAreaAction = new SuperMap.Web.UI.Action3Ds.MeasureArea(sceneControl);
				sceneControl.set_sceneAction(measureAreaAction); 
				
				//给面积量算事件和量算结束事件注册回调函数
				sceneControl.addEvent("measureArea", areaHandler);
				sceneControl.addEvent("measureAreaFinished", areaFinishedHandler);
			}
		
			function areaHandler(dArea) 
			{
				//量算过程中及时的显示量算信息
				document.getElementById("MeasureInfo").innerHTML = "<div>" + "面积:" + dArea + "平方米" + "</div>";
			}
		
			function areaFinishedHandler(dArea, line3D) 
			{
                scene.get_trackingLayer3D().removeAll();
				//量算结束后显示总的面积信息
				document.getElementById("MeasureInfo").innerHTML = "<div>" + "面积:" + dArea + "平方米" + "</div>";
     for (var i = 0; i < line3D.get_partCount() ; i++) {
			        var point3Ds = line3D.getPart(i);
			        for (var j = 0; j < point3Ds.get_count() ; j++) {
			            var point3D = point3Ds.get_item(j);
			            var geoPoint = new SuperMap.Web.Core.GeoPoint3D(point3D);
			            var feature3D = new SuperMap.Web.Core.Feature3D();
			            var style3D = new SuperMap.Web.Core.Style3D();
			            feature3D.set_geometry(geoPoint);
			            //定义节点颜色
			            style3D.set_markerColor(new SuperMap.Web.Core.Color(255, 0, 255, 225));
			            style3D.set_markerScale(5);
			            feature3D.set_style3D(style3D);
			            scene.get_trackingLayer3D().add(feature3D, 'p');
			        }
			    }

			    var feature3D_1 = new SuperMap.Web.Core.Feature3D();
			    var style3D_1 = new SuperMap.Web.Core.Style3D();
			    feature3D_1.set_geometry(line3D);
			    //定义线宽
			    style3D_1.set_lineWidth(1);
			    //定义线颜色
			    style3D_1.set_lineColor(new SuperMap.Web.Core.Color(255, 255, 0, 225));
			    style3D_1.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.CLAMP_TO_GROUND);
			    style3D_1.set_fillForeColor(new SuperMap.Web.Core.Color(0, 0, 0, 0));
			    feature3D_1.set_style3D(style3D_1);
			    scene.get_trackingLayer3D().add(feature3D_1, 'p1');

			    /*添加标注字体*/
			    var point3D = line3D.get_innerPoint3D();
			    var feature3D = new SuperMap.Web.Core.Feature3D();
			    var geoText3D = new SuperMap.Web.Core.GeoText3D();
			    var textPart3D = new SuperMap.Web.Core.TextPart3D('总面积:' + dArea + '平方米', point3D);
			    var textStyle3D = new SuperMap.Web.Core.TextStyle3D();


			    geoText3D.addPart(textPart3D);
			    textStyle3D.set_fontScale(1);
			    textStyle3D.set_opaqueRate(100);
			    textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(255, 255, 255, 255));
			    feature3D.set_geometry(geoText3D);
			    feature3D.set_textStyle3D(textStyle3D);

			    scene.get_trackingLayer3D().add(feature3D, 'posText');
			}
		
			function measureHeight()
			{
				//设置控件的当前操作为高程量算
				var measureHeightAction = new SuperMap.Web.UI.Action3Ds.MeasureHeight(sceneControl);
				sceneControl.set_sceneAction(measureHeightAction); 
				
				//给面高程算事件和量算结束事件注册回调函数
				sceneControl.addEvent("measureHeight", heightHandler);
				sceneControl.addEvent("measureHeightFinished", heightFinishedHandler);
			}
		
			function heightHandler(dHeight) 
			{
                 
				//量算过程中及时的显示量算信息
				document.getElementById("MeasureInfo").innerHTML = "<div>" + "高程:" + dHeight + "米" + "</div>";
			}
		
			function heightFinishedHandler(dHeight, line3D) 
			{
                scene.get_trackingLayer3D().removeAll();
				//量算结束后显示总的高程信息
				document.getElementById("MeasureInfo").innerHTML = "<div>" + "高程:" + dHeight + "米" + "</div>";
                /******** 结果线绘制 start *********/
			    var feature3D_1 = new SuperMap.Web.Core.Feature3D();
			    var style3D_1 = new SuperMap.Web.Core.Style3D();
			    feature3D_1.set_geometry(line3D);

			    //定义线宽
			    style3D_1.set_lineWidth(1);

			    //定义线颜色
			    style3D_1.set_lineColor(new SuperMap.Web.Core.Color(255, 255, 0, 225));
			    style3D_1.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.ABSOLUTE);
			    feature3D_1.set_style3D(style3D_1);
			    scene.get_trackingLayer3D().add(feature3D_1, 'p1');

			    /******** 结果线绘制 end *********/
			    /******** 结果值文本绘制 start *********/

			    var textPos = new SuperMap.Web.Core.Point3D();
                 if (line3D != undefined) {
			        textPos.x = line3D.getPart(0).get_item(1).x;
			        textPos.y = line3D.getPart(0).get_item(1).y;
			        textPos.z = line3D.getPart(0).get_item(1).z;
			    } 
                else {
			        return;
			    }

			    var feature3D = new SuperMap.Web.Core.Feature3D();
			    var geoText3D = new SuperMap.Web.Core.GeoText3D();
			    var textPart3D = new SuperMap.Web.Core.TextPart3D('距离1:' + dHeight + '米', textPos);
			    var textStyle3D = new SuperMap.Web.Core.TextStyle3D();
			    geoText3D.addPart(textPart3D);
			    textStyle3D.set_fontScale(1);
			    textStyle3D.set_opaqueRate(100);
			    textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(255, 255, 255, 255));
			    textStyle3D.set_bold(true);
			    feature3D.set_geometry(geoText3D);
			    feature3D.set_textStyle3D(textStyle3D);

			    var pointStyle = new SuperMap.Web.Core.Style3D();
			    pointStyle.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.ABSOLUTE);
			    feature3D.set_style3D(pointStyle);
			    scene.get_trackingLayer3D().add(feature3D, 'heightText');

			    /******** 结果值文本绘制 end *********/

			    //移除游标提示
			    var trackingLayer3D = scene.get_trackingLayer3D();
			    trackingLayer3D.removeAt(trackingLayer3D.indexOf('pos'));

			}
		
		</script>
		
	</head>
	<body onLoad="onPageLoad()">  
		<div id="toolSet1" style="position:absolute;top: 5px;float: left">
		<div id="MeasureInfo" style="position:relative; top:0%;left:2%;width:100%;height:5%">
		</div>
		<div id="toolSet" id="toolSet" style="position:relative; top:1px;left:5px;width:100%;height:25px">
		<input id="measureDis" type="button" value="距离量算" onClick="measureDis()">
		<input id="measureArea" type="button" value="面积量算" onClick="measureArea()">
		<input id="measureHeight" type="button" value="高程量算" onClick="measureHeight()">
		<input id="Pan" type="button" value="漫游" onClick="pan()">
		</div>
		</div>
		<div id="sceneControlDiv" style="position:absolute;top: 55px;bottom: 5px;height:92%;width:100%;float=left">
		</div>
	</body>
	
</html>