运行范例

描述

该范例展示如何通过设置Style属性,拉伸二维地物,让二维对象以三维的形式显示。

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


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="x-ua-compatible" content="IE=8" />
		<title>拉伸地物</title>
		<script type="text/javascript" src="SuperMap.Include.js" ></script>
		<script type="text/javascript">
			var scene = null;
			var sceneControl = null;
			var trackingLayer = null;
			var htmlUrl = document.location.host;
			//判断网页的打开方式是本地打开还是通过网络打开
			//不同的打开方式url赋值不同
			if(htmlUrl == "")
			{
				htmlUrl = "http://localhost:8090";
			}
			else
			{
				htmlUrl = "http://" + htmlUrl;
			}

			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() 
			{
				//获取Realspace控件的场景,控件和场景是一对一的捆绑关系
				scene = sceneControl.get_scene();
				//获取跟踪图层
				trackingLayer = scene.get_trackingLayer3D();
			}

			//控件初始化失败后的回调函数
			function failedCallback() 
			{
				alert("Realspace initialized failed!");
			}
	        
			//添加地物到跟踪图层
			function addFeature()
			{    
				//创建几何对象
				var geoRegion = new SuperMap.Web.Core.GeoRegion3D();
				var pntWN = new SuperMap.Web.Core.Point3D(115, 42, 0);
				var pntEN = new SuperMap.Web.Core.Point3D(118, 42, 0);
				var pntES = new SuperMap.Web.Core.Point3D(118, 39, 0);
				var pntWS = new SuperMap.Web.Core.Point3D(115, 39, 0);
				var point3Ds = new SuperMap.Web.Core.Point3Ds();
				point3Ds.add(pntWN);
				point3Ds.add(pntEN);
				point3Ds.add(pntES);
				point3Ds.add(pntWS);
				geoRegion.addPart(point3Ds);
                                 
				//跟踪图层中只能加feature3D,所以这里得把geometry构造成feature3D对象
				var feature3d = new SuperMap.Web.Core.Feature3D();
				feature3d.set_geometry(geoRegion);
       		    
				var style3d = new SuperMap.Web.Core.Style3D();
 
				feature3d.set_style3D(style3d);
				//设置跟踪图层可见
				trackingLayer.set_isVisible(true);
				//将feature3D加入跟踪图层
				trackingLayer.add(feature3d, "BeiJing");
				scene.get_flyingOperator().flyToBounds(geoRegion.get_bounds());        		  		
			}
           
			//拉伸地物
			function extrudeFeature() 
			{        
				var feature = trackingLayer.get_item("BeiJing");
				var style3d = feature.get_style3D();
				style3d.set_fillForeColor(new SuperMap.Web.Core.Color(255, 255, 0, 255));    		  
				style3d.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.RELATIVE_TO_GROUND);
				style3d.set_extendHeight(100000);
				style3d.set_bottomAltitude(5000);
				feature.set_style3D(style3d);             
                trackingLayer.refresh();
			} 
           
			//清除拉伸
			function clearExtrude() 
			{		
				var feature = trackingLayer.get_item("BeiJing");
				var style3d = feature.get_style3D();
				style3d.set_fillForeColor(new SuperMap.Web.Core.Color(255, 0, 0, 255));   
				style3d.set_altitudeMode(SuperMap.Web.Realspace.AltitudeMode.CLAMP_TO_GROUND);
				style3d.set_extendHeight(0);
				feature.set_style3D(style3d);     
                trackingLayer.refresh();
			}
		</script>
	</head>

	<body onLoad="onPageLoad()" >
		<div id="toolset" style="position:absolute;left:0%;top:0%;width:100%;height:10%">
		<input type="button" name="addFeature" value = "添加地物" onclick="addFeature()" style="position:absolute;left:20px;width:80px;height:50px"/>
		<input type="button" name="extrudeFeature" value = "拉伸地物" onclick="extrudeFeature()" style="position:absolute;left:105px;width:80px;height:50px"/>
		<input type="button" name="clearExtrude" value = "清除拉伸" onclick="clearExtrude()" style="position:absolute;left:190px;width:80px;height:50px"/>
		</div>
		<div id="sceneControlDiv" style="position:absolute;left:0%;top:10%;width:100%;height:100%">
		</div>
	</body>

</html>