Easyui 框架下 arcgis for js 圖層控制簡單實現

前端代碼：

<div id="MapTreewindow" class="easyui-window" title="圖層控制" closed="true" minimizable="false" 
     maximizable="false" data-options="iconCls:'icon-large-smartart'" style="width: 220px;
     height: 300px; padding: 10px;top:10px;left:calc(100% - 550px);">
<div id="tocmap"></div>
</div>

 

後端代碼：      

 function loadmaptoc() {
        zjdkmap.infoWindow.resize(260, 240);
        var treeList = [];//jquery-easyui的tree用到的tree_data.json數組
        var root = { "id": "rootnode", "text": "全部圖層", "children": [] };//增長一個根節點
        appendLayer(tubanlayer, "", root);    //增長節點
        appendLayer(fangyanglayer, "", root);
        appendLayer(tdt_basemap, "", root);
        appendLayer(tdt_annolayer, "", root);
        appendLayer(tdt_imgbasemap, "", root);
        appendLayer(tdt_imgannolayer, "", root);
        treeList.push(root);
        //jquery-easyui的樹        
        $('#tocmap').tree({
            data: treeList,
            checkbox: true, //使節點增長選擇框
            onCheck: function (node, checked) {//更新顯示選擇的圖層
                //var nodes = $('#tocmap').tree("getChecked");
                if (node.id == "rootnode") {
                    dojo.forEach(node.children, function (node) {
                        var layer = zjdkmap.getLayer(node.id)
                        layer.setVisibility(checked);
                    });
                }
                else {
                    var layer = zjdkmap.getLayer(node.id)
                    layer.setVisibility(checked);
                }
            }
        });
        $('#MapTreewindow').window('open', function () {
        });
    }

 function appendLayer(layer, icon, root) {
        var node = {
            "id": layer.id,
            "text": layer.id,
            "pid": root.id,
            "iconCls": icon,
            "checked": layer.visible ? true : false,
            "children": []
        };
        root.children.push(node);
    }

 更多GIS開發相關問題請加入 GIS開發學習QQ交流羣 192251607 共同交流學習！