运行范例

描述

该范例展示如何向三维场景中添加WMTS图层,并可通过添加或删除WMTS图层的子图层从而控制子图层的显示。

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


<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title>添加WMS图层</title>
    <script type="text/javascript" src="SuperMap.Include.js"></script>
	<script type="text/javascript" src='./scripts/jquery.js'></script>
	<script>
	    var sceneControl = null;
        var scene = null;
		// 保存所有图层名称,用于判断图层是否以重复添加
		var layerList = new Array();
        var layer3DWMS = null;
        var htmlUrl = document.location.host;
		var WMTSURL, showLayerList = [];
        //判断网页的打开方式是本地打开还是通过网络打开
        //不同的打开方式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() {
            scene = sceneControl.get_scene();
			//scene.get_sun().set_isVisible(false);
        }

        function failedCallback() {
            alert("Realspace initialized failed!");
        }
		
		function initUIControl(){
			$("#addBtn").click(
				function(){
					var selectedLi = $("#fromList").children("li.selected");
					var toUL = $("#toList");
					if(selectedLi.length > 0){
						var text = selectedLi.text();
						if(!showLayerList.contains(text)){
							showLayerList.push(text);
							$("<li>" + text + "</li>").click(showList).appendTo(toUL);
							//将图层添加到场景中
							scene.get_layer3Ds().addOGC(WMTSURL, text, SuperMap.Web.Realspace.Layer3DType.WMTS, true);
						}						
					}
				}
			);
			
			function showList(){
				$(this).parent().children("li").removeClass("selected");
				$(this).addClass("selected");
			}
			$("#delBtn").click(
				function(){
					var selectedLi = $("#toList").children("li.selected").remove();
					scene.get_layer3Ds().removeAt(selectedLi.text());
					var index = showLayerList.indexOf(selectedLi.text())
					if( -1 != index){
						showLayerList.splice(index, 1);
					}					
				}
			);
			
			$("#fromList").children("li").click(showList);
			
			$("#toList").children("li").click(showList);
		}
		
		function connectWMTS() {
			serviceList = new SuperMap.Web.Realspace.Layer3DWMTSServicesList();
            //获取输入的WMTS服务地址
            WMTSURL = document.getElementById("addressWMTS").value;
			var serviceInfo = serviceList.load(WMTSURL); 
			var nLayerCount = serviceList.get_count();
			
			//清空fromList和toList中的显示
			$("#fromList").empty();
			$("#toList").empty();
			showLayerList = [];
			// 默认将所有图层名称添加到列表中,在场景中只加载第一个图层
			if (WMTSURL != null && serviceInfo !=null && nLayerCount > 0){
				for(var i = 0; i < nLayerCount; i++){
					var layerName = serviceList.get_item(i).get_name();
					layerList[i] = layerName;
					$("<li>" + layerList[i] + "</li>").appendTo($("#fromList"));
				}
				
				var firstLayerName = serviceList.get_item(0).get_name();
				
				$("<li>" + firstLayerName + "</li>").appendTo($("#toList"));
				showLayerList.push(firstLayerName);
				layer3DWMTS = scene.get_layer3Ds().addOGC(WMTSURL, firstLayerName, SuperMap.Web.Realspace.Layer3DType.WMTS, true);
			}
			
			//注册按钮事件,列表处理
			initUIControl();
			
			if (nLayerCount == 0){
				alert("图层个数为0!");				
			}
			if (WMTSURL == null){
				alert("请输入WMTS地址");				
			}
        }
		
		// 判断图层名称是否已经存在于图层列表中
		Array.prototype.contains = function(obj) { 
			var i = this.length - 1; 
			while (i >= 0) { 
				if (this[i] == obj) { 
					return true; 
				} 
				i--;
			} 
			return false; 
		} 
		
	</script>
	<style type="text/css">
		a{
			display: inline-block;
			width: 100px;
			margin-left: 1px;
			text-algin: center;
			margin-top: 5px;
			background-color: #eee;
		}
		.selected{
			background-color:#55F;
		}
		div{
			paddding: 0px;
			border:1px solid #333"
		}
		
		ul{
			margin: 2px;
			padding:0px;
			//border: 1px solid #333;
		}
		li{
			margin:0px;
		}
		span{
			width:100%;
			display:block;
			font-size:20px;
			font-weight:bold;
			background-color:#aaa;
		}
	</style>
</head>
<body onLoad="onPageLoad()">
	<table style="width: 100%">
	        <tr>
				<td colspan="2">WMTS服务地址:<input type="text" id="addressWMTS" style="width: 500px" />
					<input type="button" value="连接服务" onClick="connectWMTS();" />
				</td>
			</tr>
			<tr>
				<td style="width: 25%; border: 1px solid; vertical-align: top;">
					<div style="position:absolute;width:20%;height:100%;background-color: #fff; border:2px solid #333; up:100">
						<div style="position:relative;width:100%;height:45%;background-color: #eee;">
							<span>可选图层</span>
							<ul id="fromList" style="list-style-type: none;"></ul>
                    </div>
						<div style="position:relative;width:100%;height:30px">
						<input type="button" value="添加图层" id="addBtn"/>
						<input type="button" value="移除图层" id="delBtn"/>
						</div>
						<div style="position:relative;width:100%;height:45%;background-color: #eee;">
							<span>已添加图层</span>
							<ul id="toList" style="list-style-type: none;" ></ul>
						</div>
					</div>
					<div id="sceneControlDiv" style="position:absolute;width:80%;height: 93.5%; border: 3px solid; right:0">
					</div>
				</td>
			</tr>
	</table>
</body>
</html>