目的：
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="600px; height:400px; border:1px solid #000;"></div></td><td valign="top" id="toc"></td></tr> </table> </form></body></html>//引入命名空间dojo.require("esri.map");//用来记录显示图层的id用var visible = [];//ArcGISDynamicMapServiceLayervar 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' onclick='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);