图层管理

////////////////////////////////////////////////////////////////////////////////
//
// 图层管理

//
////////////////////////////////////////////////////////////////////////////////
var LayerManagerModule = (function($) {
    //
    var createLayerManager = function() {
        // 工具 dom
        console.log("createLayerManager！");
        if ($("#layerManagerContainerDiv").length < 1){
            var layerManagerDom = ‘<div id="layerManagerContainerDiv" class="layerManagerContainer">‘+
                ‘<div id="layerManagerHeadDiv" class="layerManagerHead" >‘+
                    ‘<span class="layerManagerHeadLabel" > 图层管理 </span>‘+
                    ‘<a class="layerManagerHeadClose" href="#"><img id="closeButton" src="img/layerManager/close.png" title="关闭" ></img></a>‘+
                ‘</div>‘+
                ‘<div id="layerManagerDiv" class="ztree layerManager"></div>‘+
            ‘</div>‘;
            $(layerManagerDom).appendTo($(‘#controllerDiv‘));
            //
            $("#layerManagerContainerDiv").css({‘bottom‘ : 45, ‘left‘ : (document.documentElement.clientWidth - 300)/2 });
            //
            createLayerMangerTree(‘layerManagerDiv‘, Application.map);
            // 事件
            toolAction();
            //
            widgetDrag(layerManagerDom);
            //
            console.log("createLayerManager finish！");
        }
        else
        {
            var map = Application.map;
            createLayerMangerTree(‘layerManagerDiv‘, map);
            $("#layerManagerContainerDiv").show();
        }
    };

    // 事件
    var toolAction = function() {
        $("#closeButton").each(function() {
            $(this).mouseover(function() {
                // tip
                $(this).poshytip( {
                    className : ‘tip-twitter‘,
                    showTimeout : 1,
                    alignTo : ‘target‘,
                    alignX : ‘center‘,
                    offsetY : 10,
                    allowTipHover : false,
                    fade : false,
                    slide : false
                });

                var oldSrc = (this).src;
                var newSrc = oldSrc.replace(".png", "On.png");
                $(this).attr("src", newSrc);
            });
            //
            $(this).mouseout(function() {
                var oldSrc = (this).src;
                var newSrc = oldSrc.replace("On.png", ".png");
                $(this).attr("src", newSrc);
            });
            //
            $(this).click(function() {
                $("#layerManagerContainerDiv").hide();
            });
        })
    };

    /*
    提取图层信息数据
    map: 地图
    */
    var createLayerMangerTreeData = function (map) {
        var layerMangerTreeData = new Array();
        var layerIds = map.layerIds;
        for (var i = 0; i < layerIds.length; i++) {
            var layerId = layerIds[i];
            var layer = map.getLayer(layerId);
            if (layer.declaredClass == "esri.layers.ArcGISDynamicMapServiceLayer") {// instanceof esri.layers.ArcGISDynamicMapServiceLayer) {
                var layerInfos = layer.layerInfos;
                var visibleLayers = layer.visibleLayers;
                //console.log(visibleLayers);
                var treeNodeDataMapService = new Object();
                treeNodeDataMapService.id = layer.id;
                treeNodeDataMapService.name = layer.id;
                treeNodeDataMapService.pId = "-1";
                treeNodeDataMapService.checked = layer.visible;
                treeNodeDataMapService.chkDisabled = false;
                treeNodeDataMapService.isParent = true;
                treeNodeDataMapService.nocheck = false;
                layerMangerTreeData.push(treeNodeDataMapService);
                for (var j = 0; j < layerInfos.length; j++) {
                    var layerInfo = layerInfos[j];
                    var treeNodeDataLayer = new Object();
                    treeNodeDataLayer.id = layer.id + "_" + layerInfo.id;
                    treeNodeDataLayer.name = layerInfo.name;
                    treeNodeDataLayer.open = false;
                    treeNodeDataLayer.pId = (isNaN(layerInfo.parentLayerId) || layerInfo.parentLayerId == -1) ? layer.id : (layer.id + "_" + layerInfo.parentLayerId);

                    treeNodeDataLayer.checked = false;//layerInfo.defaultVisibility;

                    for(var k = 0; k < visibleLayers.length; k++)
                    {
                        if(visibleLayers[k] == j)
                        {
                            treeNodeDataLayer.checked = true;
                            break;
                        }
                    }
                    treeNodeDataLayer.chkDisabled = false;
                    treeNodeDataLayer.isParent = false;
                    treeNodeDataLayer.nocheck = false;
                    layerMangerTreeData.push(treeNodeDataLayer);
                }
            }
        }
        return layerMangerTreeData;
    };

    /*
    构建图层管理树
    renderToDevId : 装载该图层树的<DIV/>标签Id
    map : 地图对象
    */
    var createLayerMangerTree = function (renderToDevId, map) {
        var setting = {
            check: {
                enable: true,
                chkboxType: { "Y" : "", "N" : "" }
            },
            view: {
                dblClickExpand: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: function (e, treeId, treeNode) {
                    var sid = treeNode.id;
                    //console.log(sid);
                    if (treeNode.level == 0) {
                        var serviceId = sid;
                        var visible = treeNode.checked;
                        changeServerVisible(map, serviceId, visible);
                        return;
                    }
                    var serviceId = sid.substring(0, sid.lastIndexOf("_"));
                    var layerId = sid.substring(sid.lastIndexOf("_") + 1);
                    var treeObj = $.fn.zTree.getZTreeObj(renderToDevId);
                    var nodes = treeObj.getCheckedNodes(true);
                    var visibleLayers = new Array();
                    for (var i = 0, l = nodes.length; i < l; i++) {
                        var node = nodes[i];
                        var sidTemp = node.id;
                        var serviceIdTemp = sidTemp.substring(0, sidTemp.lastIndexOf("_"));
                        if (serviceId == serviceIdTemp) {
                            var layerIdTemp = parseInt(sidTemp.substring(sidTemp.lastIndexOf("_") + 1));
                            if(node.getParentNode().checked && node.isParent==false)
                            {
                                visibleLayers.push(layerIdTemp);
                            }
                        }
                    }
                    if(visibleLayers.length==0)
                    {
                        visibleLayers = [-1];
                    }
                    setVisibleLayers(map, serviceId, visibleLayers);
                }
            }
        };
        var zNodes = createLayerMangerTreeData(map);
        //var json = JSON.stringify(zNodes);
        //console.log(json);
        var zTree = $.fn.zTree.init($("#" + renderToDevId), setting, zNodes);
        zTree.expandAll(true);
    };

    /*
    设置可见图层
    map: 地图对象
    serviceId: 服务的Id
    visibleLayers: 可见图层的Id数组
    */
    var setVisibleLayers = function (map, serviceId, visibleLayers) {
        var layer = map.getLayer(serviceId);
        //layer.hide();
        layer.setVisibleLayers(visibleLayers);
        //layer.show();
    };

    /*
    改变地图服务可见性
    map : 地图对象
    serviceId : 服务的Id
    visible : 可见性
    */
    var changeServerVisible = function (map, serviceId, visible) {
        var layer = map.getLayer(serviceId);
        if (visible) {
            layer.show();
        }
        else {
            layer.hide();
        }
    };

    // widget拖动
    var widgetDrag = function(targetDOM) {
        var move = false, // 移动标记
        _x, _y, // 鼠标离控件左上角的相对位置
        opacity = Application.configData.ui.opacity,

        layerManagerHeadDiv = $(‘#layerManagerHeadDiv‘), layerManagerContainerDiv = $(‘#layerManagerContainerDiv‘);

        // 鼠标移动到 tab 部分鼠标为可拖动状态
        layerManagerHeadDiv.mouseover(function(e) {
            // tab 部分鼠标设置为move状态
                layerManagerHeadDiv.css(‘cursor‘, ‘move‘);
            });

        // widget tab 部分可拖动 widget
        layerManagerHeadDiv.mousedown(function(e) {
            // tab 部分鼠标设置为move状态
                layerManagerHeadDiv.css(‘cursor‘, ‘move‘);
                // 不透明度设置
                layerManagerContainerDiv.css(‘opacity‘, opacity - 0.1);
                layerManagerContainerDiv.css(‘filter‘,
                        ‘alpha(opacity=‘ + (opacity * 100 - 10) + ‘)‘);

                move = true;
                if (layerManagerContainerDiv.css(‘left‘) == ‘auto‘) {
                    _x = e.pageX
                            - ($(window).width()
                                    - parseInt(layerManagerContainerDiv.css(‘width‘)) - parseInt(layerManagerContainerDiv
                                    .css(‘right‘)));
                } else {
                    _x = e.pageX - parseInt(layerManagerContainerDiv.css(‘left‘));
                }

                if (layerManagerContainerDiv.css(‘top‘) == ‘auto‘) {
                    _y = e.pageY
                            - ($(window).height()
                                    - parseInt(layerManagerContainerDiv.css(‘height‘)) - parseInt(layerManagerContainerDiv
                                    .css(‘bottom‘)));
                } else {
                    _y = e.pageY - parseInt(layerManagerContainerDiv.css(‘top‘));
                }

            });
        $(document)
                .mousemove(function(e) {
                    if (move) {
                        var x = e.pageX - _x, // 控件左上角到屏幕左上角的相对位置
                        y = e.pageY - _y,
                        // widget 拖动范围控制
                        maxL = document.documentElement.clientWidth
                                - layerManagerContainerDiv.width(), maxT = document.documentElement.clientHeight
                                - layerManagerContainerDiv.height();
                        x <= 0 && (x = 0);
                        y <= 0 && (y = 0);
                        x >= maxL && (x = maxL);
                        y >= maxT && (y = maxT);
                        // 设置 widget 位置
                        layerManagerContainerDiv.css({‘top‘ : y, ‘left‘ : x});
                    }
                }).mouseup(function() {
                    move = false;
                    // tab 部分鼠标设置为auto状态
                        layerManagerHeadDiv.css(‘cursor‘, ‘auto‘);
                        // 不透明度设置
                        layerManagerContainerDiv.css(‘opacity‘, opacity);
                        layerManagerContainerDiv.css(‘filter‘, ‘alpha(opacity=‘ + opacity * 100 + ‘)‘);
                    });
    };
    //
    return {
        createLayerManager : createLayerManager
    };

}(jQuery));