ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Toc功能（二）

目的：
1.ArcGIS API for JavaScript实现Toc功能，图层列表的显示以及图层可见性的控制。
准备工作：
1.在ArcGIS.Server.9.3发布一个叫usa的Map Service，并且把这个Service启动起来。
完成后的效果图：

开始
0.本例子开始采用Esri提供的在线的jsapi了没有用本地的服务服务端jsapi原因是我只有1.0的jsapi了，在线的已经更新到1.1了。
1.启动vs新建名为MapToc的ASP.NET Web应用程序。其实jsapi是纯客户端的开发了不需要vs也不需要.net了，纯html页面就可以了用记事本都可以开发了。我这里为了方便了就用vs2008了，毕竟可以调试js脚本了。
2.然后在Default.aspx页面里添加对js库和css文件的引用了，这里的引用地址指向在线的jsapi服务了，包括css和js两部分的引用，具体的说明和代码如下：

< link  rel ="stylesheet"  type ="text/css"  href ="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css" >
     < script  type ="text/javascript"  src ="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1" ></ script >

3.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建mapApp.js的文件，这里用来编写我们自己的js代码了，在页面里添加对这个js文件的引用，同时在页面里添加一个id为map的div标签作为地图控件的载体，具体代码如下：

<% @ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MapToc._Default"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > Untitled Page </ title >
     < link  rel ="stylesheet"  type ="text/css"  href ="http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css" >
     < script  type ="text/javascript"  src ="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1" ></ script >
     < script  type ="text/javascript"  src ="javascript/mapApp.js" ></ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < table  border ="1px" >
     < tr >< td >< div  id ="map"  class ="tundra"  style ="width:600px; height:400px; border:1px solid #000;" ></ div ></ td >< td  valign ="top"  id ="toc" ></ td ></ tr >
     </ table >
    
     </ form >
</ body >
</ html >

4.完成显示部分后切换到mapApp.js中编写功能代码， 代码的代码的功能是载入我们上面发布的usa的地图图层在map控件中进行显示，同时在map控件右边的id为toc的td内容显示地图图层列表，具体的说明代码的注释已经非常详细了，具体代码：

// 引入命名空间
dojo.require( " esri.map " );
// 用来记录显示图层的id用
var  visible  =  [];
// ArcGISDynamicMapServiceLayer
var  dynamicMapServiceLayer = [];
// 地图初始化方法
function  init() 
{
   var map = new esri.Map("map");
   dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://mypc/ArcGIS/rest/services/USA/MapServer");
   //添加图层载入后监听方法loadLayerList
   dojo.connect(dynamicMapServiceLayer,"onLoad",loadLayerList);
   //添加到地图控件进行显示
   map.addLayer(dynamicMapServiceLayer);
}
// 载入地图名称到右边的列表中
function  loadLayerList(layers)
{
   var html="";
   //获取图层信息
   var infos=layers.layerInfos;
   for(var i=0;i<infos.length;i++)
   {
      var info = infos[i];
      //图层默认显示的话就把图层id添加到visible
      if(info.defaultVisibility)
      {
         visible.push(info.id);
      }
      //输出图层列表的html
      html=html+"<div><input id='"+info.id+"' name='layerList' class='listCss' type='checkbox' value='checkbox' οnclick='setLayerVisibility()' "+(info.defaultVisibility ? "checked":"")+" />"+info.name+"</div>"
   }
   //设置可视图层
   dynamicMapServiceLayer.setVisibleLayers(visible);
   //在右边显示图层名列表
   dojo.byId("toc").innerHTML=html;
}
// 设置图层是否可视的方法
function  setLayerVisibility()
{
   //用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);
}

dojo.addOnLoad(init);

5.这样就完成了toc的功能，能控制地图图层的显示。