ArcGIS JS API结合z-tree 图层控制

1、引入z-tree和arcgis js api的css和js文件

2、创建地图容器和ztree标签，并设定相关样式

3、创建地图，根据动态地图服务的服务地址构建ztree的数据，写ztree的check函数。

            var map;
            var MapLayrUrl = 'http://localhost:6080/arcgis/rest/services//TuCengKongZhi/MapServer';  //和动态地图服务一致
            var defaultIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABTUlEQVQ4T2P8////RwYGBj4G8sAnRpgB777/YQhaeoPh2edfDOwsTFiN+/efgeH7738MFfbSDGkm4iA1CAOyN99j2Hj9HYMAJwsDIx7XfPzxh0FDlIthZbgagyAnC8SA+ede8VXtfsggyMHCwMyETzsDw38GBoYXn38z5FlKMNQ5yn5ivPT868eQ5Tf5mJgYGFgIaIY57M+//wz//jEwrIlUR3gB5L/sTXcZdtz+wMDHwYwjDP4z/PnLwDArQJnBVgEc7ggDll58zbDn7geG+UGqeONj9ZU3DEcffmaY4K2IMODLr798uVvuMSQYijPYK+KP0a+//jLkbLnPEG8oyuCgyA9xwcRjz/juvvvJMMkHbCpBMPvMS4b7738ytLnKfWJ8/unnx+jVt/nuv//BwMOG3e/oJn77/Y9BnIeVYXmY2mggUjUQCcYddgWfANsi6zga60ZNAAAAAElFTkSuQmCC";
            function getLayersData() {
                var layersArray = [];
                $.ajax({
                    type: 'POST',
                    url: MapLayrUrl + '?f=pjson',
                    dataType: 'json',
                    async: false,
                    success: function (data, textStatus, jqHXR) {
                        var node = {name:'', open: false, chileren:[]};
                        layersArray = data.layers;
                        var treeJson = [];
                        for (var i = 0; i < layersArray.length; i++) {
                            if (-1 == layersArray[i]) {
                                node = {name:layersArray[i].name, open: false};
                            }
                            if (null != layersArray[i].subLayerIds) {

                            }
                            treeJson.push(node);
                        }
                    }
                });

                $.ajax({
                    type: 'POST',
                    url: MapLayrUrl + '/legend?f=pjson',
                    dataType: 'json',
                    async: false,
                    success: function (data, textStatus, jqHXR) {
                        var legendArray = data.layers;
                        for (var i = 0; i < legendArray.length; i++) {
                            var layerId = legendArray[i].layerId;
                            if (legendArray[i].legend.length > 1) {
                                var legends = legendArray[i].legend;
                                for (var k = 0; k < legends.length; k++) {
                                    var legendNode = { parentLayerId: layerId, name: legends[k].label, icon: 'data:image/png;base64,'+legends[k].imageData };
                                    layersArray.push(legendNode);
                                }
                                layersArray[layerId].icon = '';
                            } else {
                                layersArray[layerId].icon = 'data:image/png;base64,' + legendArray[i].legend[0].imageData;
                            }

                        }
                    }
                });

                var rootNode = {id:-1, name:"root", children: []};
                var data = layersArray;
                var layerArray = [];
                for (var i = 0; i < data.length; i++) {
                    if (undefined == data[i].icon) {
                        data[i].icon = defaultIcon;
                    }
                    if (undefined == data[i].id) {
                        data[i].nocheck = true;
                    } else {
                        data[i].nocheck = false;
                    }
                    var node = {id:data[i].id, parentId:data[i].parentLayerId, open:true, name: data[i].name,icon: data[i].icon, nocheck: data[i].nocheck  };
                    layerArray.push(node);
                }
                for (var i = 0; i < layerArray.length; i++) {
                    if (-1 == layerArray[i].parentId) {
                        rootNode.children.push(recursion(layerArray[i], layerArray));
                    }
                }return rootNode.children;
            }
            /**
             * 数组转换为treeJson
             */
            function recursion(node, nodes) {
                for ( var index = 0; index < nodes.length; index++) {
                    if(node.id == nodes[index].parentId) {
                        if (undefined == node.children) {
                            node.children = [];
                        }
                        node.children.push(recursion(nodes[index],nodes));
                    }
                }
                return node;
            }
            /**
             * 图层控制
             */
            function onCheck(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("treeContainer"),
                    checkedNodes = zTree.getCheckedNodes(true);
                var ids = [];
                if (0 < checkedNodes.length) {
                    for (var i=0; i< checkedNodes.length; i++) {
                        if (!checkedNodes[i].isParent) {
                            ids.push(checkedNodes[i].id);
                        } else {
                            if (checkedNodes[i].children.length > 0) {
                                var flag = false;
                                for (var k = 0; k < checkedNodes[i].children.length; k++) {
                                    flag = checkedNodes[i].children[k].nocheck
                                }
                                if (flag) {
                                    ids.push(checkedNodes[i].id)
                                }
                            }
                        }
                    }
                }else{
                    ids.push(-1);
                }
                map.getLayer('layer1').setVisibleLayers(ids);
            }

                map=new Map('map');
                var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//TuCengKongZhi/MapServer");
                layer1.id='layer1';
                map.addLayer(layer1);

                setTimeout(function() {    //使用settimeout，等待地图加载完成。
                    var zTreeObj;
                    var setting = {
                        check: {
                            enable: true
                        },
                        callback: {
                            onCheck: onCheck
                        }
                    };
                    var zNodes = getLayersData();
                    zTreeObj = $.fn.zTree.init($("#treeContainer"), setting, zNodes);
                    var zTree1 = $.fn.zTree.getZTreeObj("treeContainer");
                    zTree1.checkAllNodes(true);
                }, 4000);

4、效果图如下

5、完整资源地址 

https://download.csdn.net/download/shijie_nihao/11504162