之前在寫安卓移動端時候，有這樣的一個對地圖多個圖層管理介面，即在單獨寫了一個圖層面板，裡面列舉app的所有圖層，如果懂得Android開發方面的小夥伴，就是一個ListView裡面添加了SeekBar拖動按鈕，通過拖動按鈕圖層的透明度不斷變化可以直觀的在地圖上展示不同圖層渲染情況。這樣的需求，在做三維地理資訊系統中，也有用到的地方，但苦於我們在使用的第三方三維平臺中沒有提供有圖層透明度介面，因此無法實現需要的功能。而今天正好使用到arcgis for javascript的api，提供了調整圖層透明度的介面，因此可以實現一下這個想法。

在學習這個功能中，我們使用ztree來載入地圖圖層。對於ztree我就不想說太多的溢美之詞了，這個外掛可以說非常強大，誰用誰知道。實現載入帶有調整圖層透明度的滑動條是在oncheck中實現，使用了子節點點選新增滑動條的方式。但是需要注意的是在哪個id中新增相應的div，我們來看一下ztree幫我們生成子節點的id。開啟chrome瀏覽器，進入到除錯模式，看看生成的id為treeNode.tId和”_a”的組合，具體如下圖所示。

有了這一點後使用該物件的after方法追加我們需要的滑動條。對於滑動條，大家可以按照自己的需要或者熟悉的外掛編寫。然後將圖層傳入到我們的滑動條中，根據滑動條回撥的值來設定不同的值，這樣就可以相應的調整圖層的透明度了。

那麼來說了一下，關於ztree，在配置圖層的使用，大家可以根據網路相關資料設定ztree的相應屬性，這裡就不一一說明了，具體可以參考網路相關資料。

最後實現的效果如下圖所示。是不是就可以達到了需要的實現效果。當然，對於ztree的樣式，比如圖示，大家可以做相應的修改。

好了，最後貼上實現的程式碼吧。

 var setting={
                   check: {
                       enable: true, //是否顯示checkbox或radio
                       chkboxType: { "Y": "", "N": "" }
                     },
                   view: {
                      dblClickExpand: false,
                      expandSpeed: "", //節點展開、摺疊時的動畫速度, 可設定("","slow", "normal", or "fast")
                      selectedMulti: false //設定是否允許同時選中多個節點
                     },
                   data:{
                     simpleData:{
                       enable:true,
                       idKey:"id",
                       pidKey:"pId"
                     }
                   },
                  callback:{
                    onClick:onClick,
                    onCheck:onCheck,
                  }
             };

             var zNodes=[ {name:"地圖資料",URL:"",id:10,pId:0,isParent:true,nocheck:true},
                          {name:"衛星資料",URL:URLwxyx,id:101,pId:10},
                          {name:"專題資料",URL:URLztsj,id:102,pId:10},
                          {name:"地圖資料",URL:"",id:11,pId:0,isParent:true,nocheck: true},
                          {name:"衛星資料",URL:URLwxyx,id:111,pId:11},
                          {name:"專題資料",URL:URLztsj,id:112,pId:11}
                                                          
                        ];

             function onClick(e,treeId,treeNode){
                
                var zTree=$.fn.zTree.getZTreeObj("layerTree");
                zTree.checkNode(treeNode, !treeNode.checked, null, true);
                return false;
             }

             function onCheck(e,treeId,treeNode){


                var checked=treeNode.checked;
                if (treeNode.checked == true) {
                  //選中節點的ID
                  var svcID = treeNode["id"];
                  var newURL=treeNode["URL"];

                  var curTreeObj = $.fn.zTree.getZTreeObj(treeId);
                  //獲取所有的節點
                  var nodes = curTreeObj.getCheckedNodes();
                  //遍歷所有選中節點，去除非當前選中的服務,並將其父節點區劃節點加入陣列
                  var i = 0, length = nodes.length;
                  var qhNodes = [];
                  for (; i < length; i++) {
                     var curNode = nodes[i];
                     if (curNode["id"] == svcID) {
                          qhNodes.push(curNode.getParentNode());
                     }
                  }

                  var parentIDsArr = [];
                  var nodeIDsArr = [];
                  var resultArr = [];
                  length = qhNodes.length;
                  //遍歷區劃節點集合   存入陣列
                  for (var i = 0; i < length; i++) {
                     var curId = qhNodes[i]["id"];
                     parentIDsArr.push(curId);
                  }

                  nodeIDsArr = parentIDsArr.concat();
                  var j = 0;

                  for(;j<length;j++){
                     //獲取節點的父節點
                     var pNode = qhNodes[j].getParentNode();
                     if (!!pNode) {
                        //獲取父節點的ID
                        var pID = pNode["id"];

                        if ($.inArray(pID, nodeIDsArr) != -1) {
                          parentIDsArr.splice(parentIDsArr.indexOf(qhNodes[j]["id"]), 1);
                        }
                     }
                  }

                  //移除圖層程式碼 
                  var curURL = treeNode["URL"];
                  var ranges = eval("'" + parentIDsArr + "'");              
                  var layerID = "Layer" + svcID;

                  try{
                    map.removeLayer(map.getLayer(layerID));
                  }catch(e){

                  }
                  
                  var layer = new esri.layers.ArcGISDynamicMapServiceLayer(newURL);

                  var layerInfo=new Object();
                  layerInfo.layer=layer;
                  layerInfo.id=svcID;

                  /*將勾選的圖層服務新增到地圖服務中*/
                  MapServers.push(layerInfo);

                  map.addLayer(layer);

                
                  var aObj = $("#" + treeNode.tId + "_a");
                  var editStr = "<div id='" + treeNode.tId + "-" + treeNode.id + "' style = 'width:190px;margin:3px 0px 3px 34px'></div>";

                  aObj.after(editStr);
                  $("#" + treeNode.tId + "-" + treeNode.id).slider({
                     range: "min",
                     value: 100,
                     min: 0,
                     max: 100,
                     slide:function (event, ui){
                       var num = ui.value / 100;
                       ui.handle.parentNode.title = "當前透明度為" + num.toFixed(2);
                       var handle=$(ui.handle.parentNode);
                       $(ui.handle.parentNode).tipsy("hide");
                       $(ui.handle.parentNode).tipsy("show");
                       var id = ui.handle.parentNode.id.split("-")[1];
                      
                       layer.setOpacity(ui.value / 100);

                     }
                  });
                  $("#" + treeNode.tId + "-" + treeNode.id + " div").css("background", "#95e9ca");
                  $("#" + treeNode.tId + "-" + treeNode.id).attr("title", "當前圖層透明度為1");
                  $("#" + treeNode.tId + "-" + treeNode.id).addClass("tipsy-tip");
              }
              // 取消點選
              else{
                //取消勾選
                var aObj = $("#" + treeNode.tId + "_a");
                if (aObj && aObj.next()) {
                   aObj.next("#" + treeNode.tId + "-" + treeNode.id).remove();
                   $("#tipsy").remove();
                }

                var svcID = treeNode["id"];
                $.each(MapServers,function(index,item){
                   if (item.id==svcID) {
                      map.removeLayer(item.layer);

                   }
                })
              }
            }

            $.fn.zTree.init($("#layerTree"), setting, zNodes);