使用ArcGIS API for JavaScript实现类似ArcMap的图层控制面板Tab of Contents

最近由于项目需要封装了一个web端类似ArcMap中的Table of Contents的图层控制面板，暂时只是支持WMTS为 底图，动态服务和要素服务作为业务图层。

/*********封装接口************/
define(["dojo/_base/declare",
        "dojo/_base/lang",
        "esri/map",
        "esri/layers/WMTSLayer",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/FeatureLayer"
], function(Declare, Lang, Map, WMTSLayer, ArcGISDynamicMapServiceLayer, FeatureLayer) {
   
return Declare("AIMapToc", null, {
map:null,
ztree:null, 
layerIds:null,
allChildrenIds:null

constructor : function(_map){
   
this.map = _map;

// 控制服务及图层当前比例尺是否可见
map.on("zoom-end", Lang.hitch(this, function(){
   

// 更新图层树
this.updateTree();

}));
},
createTree:function(domId){
   

if(this.ztree != null){

// 重置ztree，因为跟踪map的addlayer事件，需要重新读取地图图层数据建立图层面板
this.ztree  = null;
$('#'+domId).empty();
}

var layerAutoNodes = [];// ztree节点集合
this.layerIds = this.map.layerIds;// 动态图层
var graphicsIds = this.map.graphicsLayerIds;// 几何图层
this.layerIds = this.layerIds.concat(graphicsIds);
var currentScale = this.map.getScale();// 当前比例尺
var isServiceScale = true;// 服务在当前比例尺下是否可见
var isLayerScale = true;// 图层在当前比例尺下是否可见
var check = false;//  节点选中情况

// 遍历所有的图层，构造ztree
for(var i = 0, len = this.layerIds.length;i < len;i++){


var layer = this.map.getLayer(this.layerIds[i]);
if(layer instanceof WMTSLayer){
  // 底图不加入图层面板

continue;
}else{


if(layer instanceof ArcGISDynamicMapServiceLayer){
  //动态地图服务


isServiceScale = (!layer.minScale || currentScale >= layer.maxScale && currentScale <= layer.minScale);// 不设置图层显示比例尺范围时minScale等于0
var layerInfos = layer.layerInfos;
isCheck = layer.visible;
layerAutoNodes.push({
  "name":"地图服务"+i,"id":i, "pId":-1,"checked":isCheck,