5、图层控制TOC

图层控制TOC的制作：

1、 首先熟悉一下思路：

获取图层的方法：（利用map类的getLayer（id）方法）直接传入图层服务名称

获取图层的信息：利用图层的layerInfos属性，获取到指定图层的全部info，里面包括图层ID，图层是否可见，图层的名称，利用这些属性基本上可以完成图层TOC的制作。

2、 事件：图层控制需要在程序执行出来，地图加载完成后就要显示出图层的名称和显示状态，另不需要用户修改添加图层，故而执行事件为：图层的onload事件

3、 需要的函数：

TOC中信息的加载函数：loadLayerList（）此函数需与图层的onload事件相关联；

TOC中图层显示控制函数：setVisibility（）

4、 加载图层信息具体实现方法：

（1）新建网页，实现地图加载和地图浏览功能（详见前几篇文章）；

（2）在网页中加入层id=”Layeroperation”；

（3）关联loadLayerList（）函数跟图层onLoad事件监听；

此事件监听写在init（）里面： dojo.connect(dynamicMapServiceLayer,"onLoad",loadLayerList);

(4)loderLayerList（）函数的编写：

//图层控制代码 

//图层控制代码 

function loadLayerList(layers) 

{ 

var html="<table border='1'cellpadding='0' cellspacing='0' bordercolor='red' style=' 100%;'>"; 

var LayerDIV=document.getElementById("Layeroperation");//获取DIV 

var infos=layers.layerInfos;//获取图层的信息库 

for(var i=0;i<infos.length;i++)//逐条浏览各个图层的信息 

{ 

var info=infos[i]; 

html=html+"<tr><td><input id='"+info.id+"' name='layerList' class='listCss' type='checkbox' value='checkbox' onclick='setVisibility()' "+(info.defaultVisibility ? "checked":"")+" />"+info.name+"</td></tr>" 

} 

html=html+"</table>" 

LayerDIV.innerHTML=(html); 

} 

5、 图层的显示控制实现：

（1）为图层信息中的checkbox添加单击事件，onclick=”setVisibility()”;’

（2）设置编写setVisibility函数：

function setVisibility() 

{ 

//用dojo.query获取css为listCss的元素数组 

var inputs = dojo.query(".listCss"); 

visible = []; 

//对checkbox数组进行变量把选中的id添加到visible 

for(var i=0;i<inputs.length;i++) 

{ 

if(inputs[i].checked) 

{ 

visible.push(inputs[i].id); 

} 

} 

//设置可视图层 

dynamicMapServiceLayer.setVisibleLayers(visible); 

} 

（3）效果图：

6、 至此完成TOC功能！