运行范例

描述

该范例展示获取图层的默认风格,并加载默认风格,以及更改图层的默认风格。

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


<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=8" />	
		<meta http-equiv="Content-Type" content="text/html; 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();
				
				//iServer服务地址
				serverAddress = sceneUrl;				

				//获取三维图层集合 
				layer3Ds = scene.get_layer3Ds();
			}

			//控件初始化失败后的回调函数
			function failedCallback() 
			{
				alert("Realspace initialized failed!");
			}
			//获得图层的数据名称
			function getDataName(layerName)
			{
				var layer3DServicesList = sceneControl.get_layer3DServicesList();
				var bLoad = layer3DServicesList.load(serverAddress, "scene");
				if(bLoad)
				{
					var layer3DServiceInfo = layer3DServicesList.get_item(layerName);
					var dataName = layer3DServiceInfo.get_dataName();
					var layer3DType = layer3DServiceInfo.get_type();
					return dataName;
				}
				else
				{
					alert("获取图层服务信息失败!");
				}		
			}
			
			function createVector()
			{
				var layerDataName = getDataName("buildings@RealspaceSample");
				//新建矢量图层
				var vectorLayer = new SuperMap.Web.Realspace.Layer3D(serverAddress,"buildings@RealspaceSample", layerDataName, SuperMap.Web.Realspace.Layer3DType.VECTOR);
				if (vectorLayer != null)
				{
					layer3Ds.insert(vectorLayer);
				
					//飞行到矢量图层的地理范围内
					var geobound = vectorLayer.get_bounds();   
					scene.get_flyingOperator().flyToBounds(geobound);
				}
				scene.refresh();				
			}
			//获得图层的风格
			function loadStyle()
			{
				//获取一个三维图层信息列表对象实例  
				var layer3DServicesList = sceneControl.get_layer3DServicesList();
				
				//从指定的服务器和场景获取该场景的全部图层服务信息,获取成功返回 True  
				var bLoad = layer3DServicesList.load(serverAddress,"scene");
				if(bLoad)
				{
					//获取指定图层的信息
					var layer3DServiceInfo = layer3DServicesList.get_item("buildings@RealspaceSample");
					//构造一个Style3D对象
					var style3D = new SuperMap.Web.Core.Style3D();
				
					//获取图层的风格信息
					style3D = layer3DServiceInfo.get_style3D();
					
					//加载图层默认的风格
					layer3Ds.get_item("buildings@RealspaceSample").set_style3D(style3D);
					scene.refresh();
				}		
			}
			function changeStyle()
			{
				var regionRed = document.getElementById("regionRed").value;
				var regionGreen = document.getElementById("regionGreen").value;
				var regionBlue = document.getElementById("regionBlue").value;
				var lineRed = document.getElementById("lineRed").value;
				var lineGreen = document.getElementById("lineGreen").value;
				var lineBlue = document.getElementById("lineBlue").value;
				var lineWidth = document.getElementById("lineWidth").value;
				var extendHeight = document.getElementById("extendHeight").value;
				var altitudeMode = document.getElementById("altitudeMode").value;
				//构造一个Style3D对象
				var regionStyle3D = new SuperMap.Web.Core.Style3D();
				
				//设置图层的填充前景色、线颜色、线宽度
				regionStyle3D.set_fillForeColor(new SuperMap.Web.Core.Color(regionRed,regionGreen,regionBlue,255));
				regionStyle3D.set_lineColor(new SuperMap.Web.Core.Color(lineRed,lineGreen,lineBlue,255));
				regionStyle3D.set_lineWidth(lineWidth);
				regionStyle3D.set_extendHeight(extendHeight);
				regionStyle3D.set_bottomAltitude("100");
				regionStyle3D.set_altitudeMode(altitudeMode);
				
				//将风格加载到指定的图层上
				layer3Ds.get_item("buildings@RealspaceSample").set_style3D(regionStyle3D);
				
				scene.refresh();
			}
			
		</script>
	</head>

	<body onLoad="onPageLoad()">  		
		<div  style="position:absolute;left:5px;top:5px;right:5px;float:left;">
		<input id="CreateVector" type="button" value="加载矢量图层" onClick="return createVector()" />
		<input id="LoadStyle" type="button" value="加载默认风格" onClick="return loadStyle()" />
		<!--设定图层风格-->	
		<label for="FillColor" >填充颜色</label>
		<label for="Red" >R</label>  
		<input id="regionRed" name="Red" type="text" value="0" /> 
		<label for="Green" >G</label> 
		<input id="regionGreen" name="Green" type="text" value="0"/>
		<label for="Blue" >B</label>
		<input id="regionBlue" name="Blue" type="text" value="0" />
		<label for="AltitudeMode">高度模式</label>
		<select id="altitudeMode" name="AltitudeMode">
		<option value="0">地表层高度模式</option>
		<option value="1">距地相对高度模式</option>
		<option value="2">绝对高度模式</option>
		</select>
		<label for="ExtendHeight" >拉伸高度</label>
		<input id="extendHeight" name="extendHeight" type="text" value="0" />
			
		<br>
		<label for="LineColor" >线条颜色</label>
		<label for="Red" >R</label>  
		<input id="lineRed" name="Red" type="text" value="0" /> 
		<label for="Green" >G</label> 
		<input id="lineGreen" name="Green" type="text" value="0"/>
		<label for="Blue" >B</label> 
		<input id="lineBlue" name="Blue" type="text" value="0" />
		<label for="LineWidth" >线条宽度</label> 
		<input id="lineWidth" name="LineWidth" type="text" value="1" />
		<input id="ChangeStyle" type="button" value="更改图层风格" onClick="return changeStyle()" />
		<br />	
		</div>	
		<div id="sceneControlDiv" style="position:absolute;left:5px;top:85px;bottom:5px;right:5px;float:left;"> 
		</div>
	</body>
</html>