本文介绍如何使用 ArcGIS JavaScript API 实现地图服务图层列表(TOC)功能，包括图层显示及可见性控制。通过具体步骤展示如何设置开发环境、引用必要的库文件、编写初始化地图和图层加载等功能代码。
原帖：http://www.cnblogs.com/hll2008/archive/2008/11/17/1335313.html
目的：
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' 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);
5.这样就完成了toc的功能，能控制地图图层的显示。
扫一扫
1686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
