TDataView_ui/scripts/layout/layout.js

/**
 * [ONEMAP.M.pcLayout]
 * @return {[object]}
 */
define([
    'html!templates/layout',
    'css!styles/layout',
    'layoutDir/noteBar',
    'css!styles/popupHtml.css'
], function(tplLayout) {

    /**
     * pc端界面布局 模块
     * @exports ONEMAP.M.pcLayout
     * @type {Object}
     */
    //布局完成后加载地图和侧栏内容，如果url传来参数，将解析参数加载相应的模块

    /**
     * 界面样式数值变量
     * @type {Object}
     */
    var styles = {
        //头部高度
        headerHeight: 61,
        //工具栏高度
        toolbarHeight: 30,
        //地图视窗宽
        mapWidth: null,
        //地图视窗高
        mapHeight: null,
        //侧栏宽度
        sideBarWidth: 270,
        //侧栏高度
        sideBarHeight: '100%',
    };
    /**
     * 模块状态，用于存储模块的状态 例如：收起，关闭
     * @type {Object}
     */
    var status = {
            showSideBar: false,
            showFullMap: false
    }
    /**
     * 加载布局 初始化
     * 先加载 CSS，html，html事件，地图，地图控件
     * @type {Function}
     * @returns {*}
     */
    function init() {
        setLayout();
        $(window).resize(function() {
            layoutResize();
        });
        subscribe();
        bindEvent();
    };
    /**
     * 设置布局
     * @return {[type]} [description]
     */
    function setLayout() {   
        // $("body").html("");
        // console.log(tplLayout);
        $('body').append(tplLayout);
        $("#openSTSideContent").appendTo($("#map2DWrap"));

        //设置系统标题,logo,版权信息
        document.title = onemapUrlConfig.systemName;
        
        // require(['layoutDir/header'], function(header) {
        //     header.init();
        // });
        require(['layoutDir/sideNav'], function(sideNav) {
            sideNav.init();
            require(['modDir/mapHolder'], function(mapHolder) {
                mapHolder.init();
                
                require(['layoutDir/topBar'], function(topBar) {
                    topBar.init();
                });
                require(['layoutDir/footer'], function(footer) {
                    footer.init();
                });
            });
        });
        require(['layoutDir/sideBar'], function(sideBar) {
            sideBar.init();
        });
        require(['layoutDir/menu'], function(menu) {
            menu.init();
        });
        
        require(['layoutDir/layerController'], function(layerController) {
            layerController.init();
        });
        
    };

    function layoutResize() {
        
    };
    function  bindEvent(){
        $("#openSTSideContent").bind('click',function(){
            if(status.showSideBar){
                ONEMAP.C.publisher.publish('handHide','layout::sideBar');
            }else{
                ONEMAP.C.publisher.publish('handShow','layout::sideBar');
            }
        })
        //全屏
        $(".tools-fullScreen").unbind('click').bind('click',function(){
            require(['modDir/tools/toolFullScreen'], function(toolFullScreen) {
                toolFullScreen.init();
            });
        });
    } 
    
    /**
     * 设置侧栏显示状态
     * @param {[type]} options [description]
     * 显示： ONEMAP.C.publisher.publish('show','layout::sideBar');
     * 隐藏： ONEMAP.C.publisher.publish('show','layout::sideBar');
     */
    function SideBarStatusControl(options){
        if(options == 'show' || options == 'handShow'){
            if(!status.showSideBar){
                $('#wrapper').animate({
                    right: 310},
                    300, function() {
                        ONEMAP.C.publisher.publish({},'layout::resize');
                        sideBarBtn("show");
                    });
                status.showSideBar = true;
                ONEMAP.C.publisher.publish('sideBarStatus', 'sideBarStatus');
            }
        }else {
            if(status.showSideBar){
               sideBarBtn("hide");
               $('#wrapper').animate({
                   right: 0},
                   300, function() {
                       ONEMAP.C.publisher.publish({},'layout::resize');
                   });
               status.showSideBar = false;
               ONEMAP.C.publisher.publish('sideBarStatus', 'sideBarStatus'); 
           }
        }
    }
    function setSideBarStatus(options){
        if(options == "handHide" || options == "handShow"){
            SideBarStatusControl(options)
        }else{
            if($('.abtn-mini-side-bar').hasClass('close')){
                return false;
            }else{
                SideBarStatusControl(options);
            }
        }
    };
    //侧栏控制按钮
    function sideBarBtn(options){
        if(options === "show"){
            $("#openSTSideContent img").attr("src",onemapUrlConfig.siteUrl+"/images/layout/close3dSideIcon.png");
            $("#openSTSideContent").css("right","410px");
        }else{
            $("#openSTSideContent img").attr("src",onemapUrlConfig.siteUrl+"/images/layout/open3dSideIcon.png");
            $("#openSTSideContent").css("right","0px");
        }
    }
    /**
     * 设置全屏显示状态
     * @param {[type]} options [description]
     * 全屏： ONEMAP.C.publisher.publish(true,'layout::fullMap');
     * 取消全屏： ONEMAP.C.publisher.publish(false,'layout::fullMap');
     */
    function setFullMapStatus(options){
        if(options == true){
            status.showFullMap = true;
            ONEMAP.C.publisher.publish({},'layout::resize');
            $("#menu").animate({
                left:-340
            }, 500)
            $('#header').animate({
                top: -61},
                500, function() {});            
            $('#footer').animate({
                bottom: -30},
                500, function() {});
            $('#topBar').animate({
                right: -45},
                500, function() {});
            $('#menu').animate({
                right: -310},
                500, function() {});
            $('#sideNav').hide();
        }else {
            status.showFullMap = false;
            ONEMAP.C.publisher.publish({},'layout::resize');
            $("#menu").animate({
                left: 0
            }, 400)
            $('#header').animate({
                top: 0},
                500, function() {});            
            $('#footer').animate({
                bottom: 0},
                500, function() {});
            $('#topBar').animate({
                right: 0},
                500, function() {});
            $('#menu').animate({
                right: 0},
                500, function() {});
            $('#sideNav').show();
        }
    }
    
    function controlShijing(data){
        if(data.zoom<11){
            $(".abtn-show-shijing").hide();
        }else{
            $(".abtn-show-shijing").show();
        }
    }
    /**
     * 注册监听
     * @type {Function}
     */
    function subscribe() {
        ONEMAP.C.publisher.subscribe(setSideBarStatus,'layout::sideBar');
        ONEMAP.C.publisher.subscribe(setFullMapStatus,'layout::fullMap');
    };


    return ONEMAP.M.pcLayout = {
        init: init,
        styles:styles,
        status:status
    };
});