ArcGis 中使用zTree控制图层的显示和隐藏

动态创建zTree 树状列表，

根据checkBox的选中状态，

对图层中的点、线、面等要素进行显示或隐藏的操作。

在实际中，我将zTree构造为一个小部件。

详细代码如下：

define就是将要用到的模块引进来，function给define的模块分别起一个名字 ，。

define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/ready",
    "dojo/_base/array",
    "dojo/json",
    "dojo/on",
    "dojo/query",
    "dojo/mouse",
    "dojo/store/Memory",
    "dojo/dom-class",
    "dojo/dom-construct",
    "dojo/dom-style",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/registry",
    "./_Widget",
    "dojo/text!./templates/LayerzTree.html"
], function(
    declare,
    lang,
    ready,
    array,
    JSON,
    on,
    query,
    mouse,
    Memory,
    domClass,
    domConstruct,
    domStyle,
    _Widget,
    _TemplatedMixin,
    registry,
    _MyWidget,
    template 
)

 

{
    var layertree = declare("widgets.LayerTree",[_MyWidget],{
        templateString:template,
        title:"图层管理",
        constructor:function(/*Object*/params){
         //   this.inherited(arguments);
            if(params == undefined){
                return;
            }
            if ("map" in params) {
                this.map = params.map;
            }
            if("mapServiceConfig" in params) {//mapServiceConfig 为json数据，是具体的点、线、面，就是从children
                this.mapServiceConfig = params.mapServiceConfig;
                this.mapServiceConfigStore = new Memory({data: this.mapServiceConfig})
            }
            if("dataConfigs" in params) {  // dataConfigs 为另一组json数据，是父类，即点线面。
                this.dataConfigs = params.dataConfigs;
              
            }
        },
        postCreate: function() { 
            this.inherited("postCreate", arguments); 
            this._initTree(this.map,this.mapServiceConfig,this.dataConfigs); //调研_initTree方法，并传参
       } ,
      
       _initTree : function(map,mapServiceConfig,dataConfigs){
    	  
    	    var zTreeObj; 
    	    var zTreeNodes=[];
          var setting = {  
                data: {  
                    simpleData: {  
                        enable: true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: "-1"
                    }  
                },
              check: {
    		       enable: true,
    		       chkboxType: { "Y": "ps", "N": "ps" }  
              // Y属性定义checkbox被选中后的状态  //N属性定义checkbox取消选中后的状态  //p表示操作影响父级节点，s表示操作影响子级节点
                      },
                callback:{
                   onCheck: zTreeOnCheck
                     }
             };
             var pid = "root";   //动态追加父节点，点线面
             for(var i=0;i<dataConfigs.length;i++){
    	    	 zTreeNodes.push({"name":dataConfigs[i].name,"id":dataConfigs[i].code, "pId":pid,checked:true});
    	     } 
        	 for(var i=0;i<mapServiceConfig.length;i++){    //动态追加子节点，具体的点，具体的面等
        	  zTreeNodes.push({"name":mapServiceConfig[i].description,"id":mapServiceConfig[i].id, "pId":mapServiceConfig[i].code,checked:true});
          }
         
        function zTreeOnCheck(event, treeId, treeNode) {  
            refreshLayers();  
            clearCheckedOldNodes();  
        }; 
        //刷新图层的显示情况  
        function refreshLayers() {  
            var zTree = $.fn.zTree.getZTreeObj("layerZtree");  
            var changedNodes = zTree.getChangeCheckedNodes();  //获取状态改变的节点
            if (changedNodes.length >1 ){  
            //如果改变状态节点的长度大于1，意味着选中的是父节点，，但操作是针对子节点
            //所以从i = 1 开始循环操作
         	   for ( var i=1 ; i < changedNodes.length ; i++ ){   
                    //获取选中状态
                   var checkstatus = changedNodes[i].checked;
                    //获取图层id
                    var layerid =  changedNodes[i].id;
                  //获取当前图层
                    var incidentLayer = map.getLayer(layerid);
                  //设置图层显示隐藏状态
                    incidentLayer.setVisibility(checkstatus);
                }   
            }else if(changedNodes.length == 1){
                    //如果改变状态节点的长度等于1，意味着选中的是子节点，直接进行操作
              var checkstatus = changedNodes[0].checked;

              var layerid = changedNodes[0].id;

              var incidentLayer = map.getLayer(layerid);

              incidentLayer.setVisibility(checkstatus);

   }

}

//清理善后工作

function clearCheckedOldNodes(){

var zTree = $.fn.zTree.getZTreeObj("layerZtree"),

nodes = zTree.getChangeCheckedNodes(false);

 for (var i=0, l=nodes.length; i<l; i++) {

    nodes[i].checkedOld = nodes[i].checked;
 
     }
 };

$(document).ready(function(){

    zTreeObj = $.fn.zTree.init($("#layerZtree"), setting, zTreeNodes);

    zTreeObj.expandAll(false);

    });
 
   }

});

return layertree;});

別忘了在页面添加zTree的容器

<ul id="layerZtree" class="ztree"></ul>