运行范例

描述

该范例展示如何向三维场景中添加WMS图层,设置背景是否透明和子图层的可见性。

代码 (文件格式为 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">
        var sceneControl = null;
        var scene = null;
        var layer3DWMS = 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() {
            scene = sceneControl.get_scene();
        }

        function failedCallback() {
            alert("Realspace initialized failed!");
        }

        function connectWMS() {
            //获取输入的WMS服务地址
            var wmsURL = document.getElementById("adressWMS").value;

            var ulCtrl = document.getElementById("layersList");
            //将WMS图层添加到三维场景中
            layer3DWMS = scene.get_layer3Ds().addOGC(wmsURL, "", SuperMap.Web.Realspace.Layer3DType.WMS, true);
            //获取所添加的WMS图层的所有子图层
            var subLayersNameList = layer3DWMS.get_allSubLayers();
            //遍历子图层
            for (var i = 0; i < subLayersNameList.length; i++) {
                ulCtrl.innerHTML += "<li><input type='checkbox' name='ck' onclick='layervisiable(this)' value='" + subLayersNameList[i] + "' checked='true' />" + subLayersNameList[i] + "</li>";
            }
        }

        //子图层可见性控制
        function layervisiable(myli) {
            //获取所有子图层的对象
            var items = document.getElementsByName("ck");

            var visibleLayerList = new Array();
            //遍历子图层对象
            for (var i = 0; i < items.length; i++) {
                //如果子图层被勾选,则将其添加到 visibleLayerList 中
                if (items[i].checked) {
                    visibleLayerList.push(items[i].value);
                }
            }
            //设置visibleLayerList中所有图层可见
            layer3DWMS.set_visibleSubLayers(visibleLayerList);
            scene.refresh();
        }

        //WMS图层背景透明控制
        function backgroundTrans(mycheckbox) {
            var ischecked = mycheckbox.checked;
			if(layer3DWMS !=null){
            layer3DWMS.set_isBackgroundTransparent(ischecked);
            scene.refresh(); 
			}
        }


    </script>
</head>
<body onload="onPageLoad();">
	<div id="tools" style="position:absolute;top:5px; height:30px;left:5px;right:5px;float:left;">
	WMS服务地址:<input type="text" id="adressWMS" style="width: 500px" />
                <input type="button" value="连接服务" onClick="connectWMS();" />
                <input type="checkbox" id="backTrans" onClick="backgroundTrans(this);" checked="true" />背景透明
	</div>
	<div id="list" style="position:absolute;left:5px;top:35px;bottom:5px;width:250px;border:3px solid #cfcfcf;">
		<ul id="layersList" style="list-style: none; margin: 0; padding: 0;">
	</ul>
	</div>
	<div id="sceneControlDiv" style="position:absolute;top:35px;left:260px;bottom:5px;right:5px;border:3px solid #cfcfcf;">
	</div>

</body>
</html>