运行范例

描述

范例展示如何通过在场景点选对象,将对象信息以气泡的形式展示出来。

在范例中可通过修改气泡属性,改变所弹出气泡的样式。

气泡的样式包括:设置文字标题、字体和对其方式,边框宽度和边框背景,以及气泡四个角的样式等。

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


<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 htmlUrl = null;
	var strServerUrl = null;
	var layer3D = null;
	var infoPage = "noInfo.htm";
	var bubble = null;
	
	function onPageLoad(){
	   htmlUrl = document.location.host;
	   //判断网页的打开方式是本地打开还是通过网络打开
	   //不同的打开方式url赋值不同
	   if (htmlUrl == "") {
			htmlUrl = "http://localhost:8090";
	   }else{
			htmlUrl = "http://" + htmlUrl;
	   }
	
	   strServerUrl = htmlUrl + "/iserver/services/3D-sample/rest/realspace";
	   backColor = new SuperMap.Web.Core.Color(255, 0, 0, 100);
	   
	   //初始化三维场景控件
	   try{
		  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");
		  }
		  //若使用非IE浏览器,则抛出该异常
		  else if (e.name == SuperMap.Web.Realspace.ExceptionName.BrowserNotSupport) {
			   document.write("<p>SuperMap iClient3D for  Plugin 目前仅支持InternetExplorer浏览器,请更换浏览器后重新加载本页面.</p>");
		  }
		  //抛出其他异常
		  else{
			   alert(e.message);
		  }
	   }
	}
	
	//控件初始化完成后的回调函数,初始化完成之后才能进行数据加载 
	function initCallBack(){
		scene = sceneControl.get_scene();        
		screenLayer = scene.get_screenLayer3D();  
		 
		sceneControl.addEvent("objectSelected",objectSelected);
		sceneControl.addEvent("bubbleInitialize",bubbleInitialize);
		sceneControl.addEvent("bubbleResize",bubbleResize);
		sceneControl.addEvent("bubbleClose",bubbleClose);    
		 
		var isOpen =  scene.open(strServerUrl,"scene_olympicgreen");
		if (isOpen) {
			layer3D = scene.get_layer3Ds().get_item(0);
			
			if (layer3D != null) {
				var lyrBounds = layer3D.get_bounds();
				var camera = new SuperMap.Web.Realspace.Camera(116.390124629661, 39.99072655683, 787.10833104047);
				camera.set_tilt(60.978013297770225);
				scene.get_flyingOperator().flyTo(camera,0,SuperMap.Web.Realspace.FlyingMode.CAMERA_NORMAL);
			}
		}else{
			alert("打开场景失败");
		}
		
		//添加屏幕图层文本
		try{
			var anchorPoint = new SuperMap.Web.Core.Point3D(0.35,0.975);
			var txtPart3D = new SuperMap.Web.Core.TextPart3D("设置气泡任一属性后,需要关闭当前气泡,选择模型对象,弹出新气泡,修改属性生效", anchorPoint);   
			var textArray = [txtPart3D];
			var text3D = new SuperMap.Web.Core.GeoText3D(textArray);
			
			var feature3D = new SuperMap.Web.Core.Feature3D();
			feature3D.set_geometry(text3D);
			
			var textStyle = new SuperMap.Web.Core.TextStyle3D();
			textStyle.set_foreColor(new SuperMap.Web.Core.Color(255,0,0,255));
			textStyle.set_backColor(new SuperMap.Web.Core.Color(0,0,0,255));
			textStyle.set_outline(true);
			textStyle.set_fontName("微软雅黑");
			textStyle.set_fontScale(0.8);
			feature3D.set_textStyle3D(textStyle);
			
			scene.get_screenLayer3D().add(feature3D,"Text");
			scene.get_screenLayer3D().set_isVisible(true);
		}
		catch(e){
			alert("屏幕图层添加文字失败");
		}
	}
	
	//控件初始化失败后的回调函数
	function failedCallBack(){
		alert("Realspace initiallized failed");
	}
	
	function objectSelected(selected3d){
		var objId = selected3d[0].get_item(0);
		var objInLayer3D = selected3d[0].get_layer3D();
		var featrue3D = objInLayer3D.findFeature3DByID(objId);
		var point3D = null;
		if (featrue3D) {
			point3D = featrue3D.get_geometry().get_position();
		}
		
		var featureName = featrue3D.get_name();
		switch(objId){
			case 206:
				infoPage = "Info_1.htm";
				break;
			case 156:
				infoPage = "Info_3.htm";
				break;
			case 17:
				infoPage = "Info_2.htm";
				break;
			default:
				infoPage = "noInfo.htm";
				break;
		}
		createBubble(point3D);
	}
	
	function createBubble(pos){
		try{
				bubble = new SuperMap.Web.Realspace.Bubble();
				bubble.set_pointer(pos);
				
				//设置气泡标题内容
				var title = document.getElementById("TitleName").value;
				if (title != null) {
					bubble.set_title(title);
				}
				  
				var textStyle3D = new SuperMap.Web.Core.TextStyle3D();
				
				//设置气泡标题对齐方式
				var textAligns = document.getElementById("TextAlign");
				for(var i=0;i<textAligns.length;i++)
				{
					 if (textAligns[i].selected) {
						textStyle3D.set_alignment(textAligns[i].value);
					}
				}        
				//设置标题文本字体   
				var fontNames = document.getElementById("FontName");    
				for(var i=0;i<fontNames.length;i++){
					if (fontNames[i].selected) {
						var selectValue = fontNames[i].value;
						if (selectValue == 1) {
							textStyle3D.set_fontName("微软雅黑");
						}
						else if (selectValue == 2) {
							textStyle3D.set_fontName("宋体");
						}
						else if (selectValue == 3) {
						   textStyle3D.set_fontName("隶书");
						}
					}
				} 
				
				//设置标题字体颜色
				var fontColors = document.getElementById("FontColor");
				for(var i = 0;i<fontColors.length;i++){
					if (fontColors[i].selected) {
						var selectColor = fontColors[i].value;
						switch(selectColor) {
						case "Red":
							textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(255,0,0,100));
							break;
						case "Green":
							textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(0,255,0,100));
							break;
						case "Blue":
							textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(0,0,255,100));
							break;
						default:
							bubble.set_backColor(new SuperMap.Web.Core.Color(0,0,0,255));
							break;
						}
					}
				} 
				
				bubble.set_titleTextStyle3D(textStyle3D);                      
				
				//设置气泡边框宽度
				var frameWidth = document.getElementById("FrameWidth").value;
				if (frameWidth != null) {
					bubble.set_frameWidth(frameWidth);
				}
				
				//设置气泡圆角程度
				var roundQuality = document.getElementById("RoundQuality").value;
				if (roundQuality != null) {
					bubble.set_roundQuality(roundQuality);
				}
				
				//设置边框颜色
				var frameColors = document.getElementById("FrameColor");
				for(var i = 0;i<frameColors.length;i++){
					if (frameColors[i].selected) {
						var selectColor = frameColors[i].value;
						switch(selectColor) {
						case "Red":
							bubble.set_backColor(new SuperMap.Web.Core.Color(255,0,0,100));
							break;
						case "Green":
							bubble.set_backColor(new SuperMap.Web.Core.Color(0,255,0,100));
							break;
						case "Blue":
							bubble.set_backColor(new SuperMap.Web.Core.Color(0,0,255,100));
							break;
						default:
							bubble.set_backColor(new SuperMap.Web.Core.Color(255,255,255,255));
							break;
						}
					}
				}            
				bubble.set_frameColor(new SuperMap.Web.Core.Color(255,255,255,255));    
				 
				bubble.set_height(400);
				bubble.set_width(500);
		
				sceneControl.get_bubbles().removeAll();
				sceneControl.get_bubbles().add(bubble);
			} 
		catch(e){
			alert("创建气泡失败");
		}   
	}
	
	function bubbleInitialize(bubble){
		try
		{
			var frameInfo = document.getElementById("infoWindow");
			frameInfo.style.display = "block";
			frameInfo.src = infoPage;            
			
			frameInfo.frameborder = 0;
			frameInfo.style.marginwidth = 0;
			frameInfo.style.marginheight = 0;
			
			frameInfo.style.width = bubble.get_clientWidth()+"px";
			frameInfo.style.height = bubble.get_clientHeight()+"px";
			frameInfo.style.left = bubble.get_clientLeft() + sceneControl.get_controlOffsetX()+"px";
			frameInfo.style.top = bubble.get_clientTop() + sceneControl.get_controlOffsetY()+"px";
		}
		catch(e){
			alert("Faile to initialize bubble");
		}
	}
	
	function bubbleResize(bubble){
		try
		{
			var frameInfo = document.getElementById("infoWindow");
			frameInfo.style.display = "block";
			frameInfo.src = infoPage;
					
			frameInfo.style.width = bubble.get_clientWidth()+"px";
			frameInfo.style.height = bubble.get_clientHeight()+"px";
			frameInfo.style.left = bubble.get_clientLeft() + sceneControl.get_controlOffsetX()+"px";
			frameInfo.style.top = bubble.get_clientTop() + sceneControl.get_controlOffsetY()+"px";
		}
		catch(e)
		{
			alert("Failed to resize bubble");
		}
	}
	
	//关闭气泡
	function bubbleClose(bubble){
		try
		{
			var frameInfo = document.getElementById("infoWindow");
			frameInfo.style.display = "none";
			
			var selection3Ds = scene.findSelection3Ds(true);
			if (selection3Ds.length > 0) {
				for(var i = 0; i <= selection3Ds.length - 1; i++){
					selection3Ds[i].removeAll();
				}
			}
		}
		catch(e){
			alert("Failed to close bubble");
		}
	}
</script>
</head>
<body onLoad="onPageLoad();">
<table style=position: absolute;top: 1px;left: 5px;right: 5px" cellspacing="1">
<tr>
<td width="121">边框宽度:  
  <input name="text" type="text" id="FrameWidth" value="20" style="width:40px"/></td>
<td width="164">边框背景颜色:
  <select id="FrameColor" size="20px"><option value="Red">红色<option value="Green">绿色<option value="Blue">蓝色</select></td>
<td width="197">标题名称:
  <input id="TitleName" type="text" value="模型描述信息" style="width:120px"/></td>
<td width="155">标题字体:
  <select id="FontName" size="20px"><option value="1" selected="selected">微软雅黑<option value="2">宋体<option value="3">隶书</select></td>
<td width="137">字体颜色:
  <select id="FontColor" size="20px"><option value="Red">红色<option value="Green" selected="selected">绿色<option value="Blue">蓝色</select></td>
<td width="177">对齐方式:
  <select id="TextAlign"> <option value="9">左对齐<option value="11">右对齐<option value="10" selected="selected">居中对齐 </select></td>
<td width="191">圆角程度:
  <input id="RoundQuality" type="text" size="10px" value="1" style="width:40px"/></td>
</tr>
<tr>
<td colspan="7"><div id="sceneControlDiv" style="position:absolute;top: 50px;bottom: 5px;height:90%;width:99%; border: 1px solid"></div></td>
</tr>
</table>
<iframe id="infoWindow" style="position: absolute;top: 50px; display:none" frameborder="0" scrolling="auto">
</iframe>
</body>
</html>