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='width: 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' οnclick='setVisibility()' "+(info.defaultVisibility ? "checked":"")+" />"+info.name+"</td></tr>"

      }

       html=html+"</table>"

       LayerDIV.innerHTML=(html);

}

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

（1）为图层信息中的checkbox添加单击事件，οnclick=”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功能！