ArcGIS api for javascript+jquery实现简单的图层控制切换

这一个功能网上有很多版本，快被写烂了。写这篇博客的初衷是给各位不是GIS行业或没有接触过这个东东的猿们一些帮助。或许还有更简单或者相似的希望大家看了之后可以提出来一起讨论。只是很初级的代码，希望各位大大路过轻喷。欢迎交流。话不多说，咱们开始。

    首先在已有地图对象及图层的基础上，咱们需要构建一个列表对象来装载我们的每一个图层。现在较简单的一般是使用无序列表<ul>元素来构建，当然还有其他方式，在这里不做讨论。在构建列表时，为了灵活和动态的加载当前所有的图层。咱们需要先获取所有的图层对象：

var layers = map.getLayers();

这是一种方式。但是如果页面上存在你隐藏的图层的话也会被获取到，有的时候不需要。那么就可以使用另外一种方式：

var layers = map.getLayersVisibleAtScale(map.getScale()); 

这种方式会获取当前地图比例尺下你所能看到的所有图层。而被你隐藏起来的那些就逃过了被统计的命运（笑）。然后我们需要开始正式的构建我们的列表菜单。

 for (i = 0; i < layers.length; i++) {  
     buttonstring += '<li><img id="' + layers[i].id + '" src="/images/' + layers[i].id + '.png" /></li>';  
}  
$("#layerscontrol").html(buttonstring);  

之所以用<img>标签，是希望将切换菜单做成点击图片切换的形式,文章末尾有效果图。在构建完成后需要给每个<li>元素添加对应的点击事件。这里采用jQuery来绑定。

 $("#layerscontrol li").on("click", function (evt) {
        var layer = map.getLayer(evt.target.id);
        for (i = 0; i < layers.length; i++) {
            if (layers[i].id == evt.target.id) {
                layer.setVisibility(true);
            }
            else {
                layers[i].setVisibility(false);
            }

        }
    })

这里使用到的getLayer()方法可以在map所拥有的所有图层（layer）对象中通过该图层的ID来获取对应的图层。我这里想达到的效果是：通过获取我点击的带有图层ID的图片，在我的图层对象中找到该图层，然后改变它的可见性。从而达到隐藏或显示的效果。
需要注意的是，在使用ARCGIS JS改变图层可见性时要用setVisibility（true/false）,而不是layer.Visibility=true/false.后者是达不到效果的。

最后,需要给菜单加入鼠标移入和移出的下放和收起特效：

$("#layerimage").hover(function () {  
        $("#layerscontrol").slideDown("fast");  
    }, function () {  
        var ss = $("#layerscontrol li:hover")  
        if ($("#layerscontrol li:hover").length>0) {  
            $("#layerscontrol").hover(function () {  
  
  
            }, function () {  
                $("#layerscontrol").slideUp("fast");  
            });  
        }  
        else {  
            $("#layerscontrol").slideUp("fast");  
        }  
});  

页面结构如下：

 <div id="layerscontrolDiv">  
               <img id="layerimage" style="display:none" src="~/images/layers.png"/>
                <ul style="list-style:none" id="layerscontrol"></ul>  
            </div>

最终效果图：

PS：初次发帖，不足之处还望见谅