TDataView_ui/scripts/mod/atlas/atlasBook.js

/**
 * [ATLAS.M.atlasView]
 * @return {[object]}
 */
define(function(tplLayout){
    /**
     * 模块数据 用于数据存储和外部调用
     * @type {Object}
     */
    var modValue = {
        options:{}
    }

    var map,
        thematicFeatureGroup;

    var mouseInMap = false;

    //图集里翻页
    var tempCurNum = null;
    var clickTimeOut = null;

    /**
     * 模块界面样式 例如：宽，高
     * @type {Object}
     */
    var styles = {}

    /**
     * 模块状态，用于存储模块的状态 例如：收起，关闭
     * @type {Object}
     */
    var status = {}
    
    /**
     * 初始化并订阅事件
     * @return {[type]} [description]
     */
    function init(data){
        //获取参数
        modValue.options = data;
        mapInit();
        getAtlasCatalogData(modValue.options.productionId);
        setLayout();
        bindEvent();

        subscribe();
    }

    /**
     * 设置界面
     */
    function setLayout(){
        layoutResize();
        $(window).resize(function() {
            layoutResize();
        });
    }

    /**
     * 界面事件绑定
     * @return {[type]} [description]
     */
    function bindEvent(){
        $('#mapHolder').bind('mouseenter',function(){
            mouseInMap = true;
        }).bind('mouseleave',function(){
            mouseInMap = false;
        })

        //搜索 回车执行 （图集列表专有）
        $('#searchBar .input').bind('keydown', function (e) {
            if (e.keyCode === 13) {
                searchAction();
            }
        });
        //搜索 按钮  （图集列表专有）
        $('#searchBar .button').bind('click',function(e){
            searchAction();
        });

        $('#searchBar .input').bind('focus',function(){
            if($(this).val() == '请输入关键字'){
                $(this).val('');
            }
        });

        $('#searchBar .input').bind('focusout',function(){
            if($(this).val() == ''){
                $(this).val('请输入关键字');
            }
        });

        //清除搜索结果 （图集列表专有）
        $('#cleanSearch').bind('click',function(){
            $('#atlasCategoryList li').css({display:'block'});
            $('#cleanSearch').hide();
            modValue.options.searchKey = null;
            $('#searchInput').val('请输入关键字');
        });

        $(document).bind('keydown.up', function(){
            if(!mouseInMap){
                clearTimeout(clickTimeOut);
                    clickTimeOut = setTimeout(function(){

                        if(tempCurNum !== null){
                            var curNum = tempCurNum;
                        }else {
                            var curNum = $('#atlasCategoryList dd ul li a').index($('#atlasCategoryList dd ul li .selected'));

                        }

                        if($('#atlasCategoryList dd ul li:eq('+((curNum-1)>=0?(curNum-1):0)+')').css('display') === 'block'){
                            $('#atlasCategoryList dd ul li .selected').removeClass('selected');
                            $('#atlasCategoryList dd ul li a:eq('+((curNum-1)>=0?(curNum-1):0)+')').addClass('selected');
                            tempCurNum = null;
                        }else {
                            curNum--;
                            if(curNum < 0 ){
                                tempCurNum = null;
                                return false;
                            }
                            tempCurNum = curNum;
                            //$(_self).trigger('click');
                            return false;
                        }

                        //AJAX获取专题图数据，添加专题图到地图容器
                        getThematicData($('#atlasCategoryList dd ul li a:eq('+((curNum-1)>=0?(curNum-1):0)+')').attr('tid'));

                        var parentDt = $('#atlasCategoryList dd ul li .selected').parent().parent().parent().prev();

                        if(parentDt.hasClass('selected')){
                            return false;
                        }else {
                            parentDt.addClass('selected');
                            parentDt.next().css({display:"block",height:'auto'}).addClass('open');
                        };

                    },0);
            }
        });
        $(document).bind('keydown.down', function(){
            if(!mouseInMap){
                clearTimeout(clickTimeOut);

                clickTimeOut = setTimeout(function(){

                    var count = $('#atlasCategoryList dd ul li').length;

                    if(tempCurNum !== null){
                        var curNum = tempCurNum;
                    }else {
                        var curNum = $('#atlasCategoryList dd ul li a').index($('#atlasCategoryList dd ul li .selected'));

                    }

                    if($('#atlasCategoryList dd ul li:eq('+((curNum+1)>=0?(curNum+1):0)+')').css('display') === 'block'){
                        $('#atlasCategoryList dd ul li .selected').removeClass('selected');
                        $('#atlasCategoryList dd ul li a:eq('+((curNum+1)>=0?(curNum+1):0)+')').addClass('selected');
                        tempCurNum = null;
                    }else {
                        curNum++;
                        if(curNum > count ){
                            tempCurNum = null;
                            return false;
                        }
                        tempCurNum = curNum;
                        //$(_self).trigger('click');
                        return false;
                    }

                    //AJAX获取专题图数据，添加专题图到地图容器
                    getThematicData($('#atlasCategoryList dd ul li a:eq('+((curNum+1)<=count?(curNum+1):count)+')').attr('tid'));

                    var parentDt = $('#atlasCategoryList dd ul li .selected').parent().parent().parent().prev();

                    if(parentDt.hasClass('selected')){
                        return false;
                    }else {
                        parentDt.addClass('selected');
                        parentDt.next().css({display:"block",height:'auto'}).addClass('open');
                    };

                },0);
            }
        });



    }

    /**
     * 界面重置
     * @return {[type]} [description]
     */
    function layoutResize(){
    }


    /**
     * 获取地图集目录数据
     * @type {Function}
     * @private
     */
    function getAtlasCatalogData(aid){    
        ATLAS.V.loading.load();    
        var ajaxUrl = onemapUrlConfig.thematicDataUrl+'/production/product_category?production_id='+aid;        
        $.ajax({
            type:"get",
            dataType:'jsonp',
            url:ajaxUrl,
            success:function(data){
                ATLAS.V.loading.loaded();
                modValue.atlasCatalogData = data;
                setSideBarCatalog();
            },
            error:function(data){
                ATLAS.V.loading.loaded();
                ATLAS.C.publisher.publish({type:'error',message:'获取地图集目录数据失败！'},'noteBar::add');
            }
        });
    }

    /**
     * 设置图集目录
     */
    function setSideBarCatalog(){
        //$('#atlasCategoryList dl').empty();
        var dtCount = 1;
        var liCount = 1;
        var first = true;
        for(var item in modValue.atlasCatalogData.category){
            var cItem =modValue.atlasCatalogData.category[item];
            
            var itemDt = $('<dt>'+dtCount+'.'+cItem.name+'<i></i></dt>');
           
            $('#atlasCategoryList dl').append(itemDt);
            var itemDd = $('<dd></dd>');
            $('#atlasCategoryList dl').append(itemDd);
            var itemDdUl = $('<ul></ul>');
            itemDd.append(itemDdUl);

            for(var i= 0,l=cItem.list.length; i<l; i++){
                var mItem = cItem.list[i];
                //默认显示第一幅图
                if(first === true){
                    var mItemLi = $('<li style="display:block;">'+
                        '<a class="selected" tid="'+mItem.guid+'" href="javascript:void(0)">'+
                        dtCount+'.'+liCount+'-'+mItem.name+'<i></i></a></li>');
                    //AJAX获取专题图数据，添加专题图到地图容器
                    getThematicData(mItem.guid);
                    first = false;
                }else {
                    var mItemLi = $('<li style="display:block;">'+
                        '<a tid="'+mItem.guid+'" href="javascript:void(0)">'+
                        dtCount+'.'+liCount+'-'+mItem.name+'</a></li>');
                }
                mItemLi.find('a').bind('click',{da:mItem},function(e){
                    $('#atlasCategoryList dd ul li .selected').removeClass('selected');
                    $(this).addClass('selected');
                    //ie6 hack
                    e.preventDefault();
                    //AJAX获取专题图数据，添加专题图到地图容器
                    getThematicData(e.data.da.guid);
                });
                mItemLi.appendTo(itemDdUl);
                liCount++;
            }
            dtCount++;
            liCount = 1;
        }
        $('#atlasCategoryList dt:first').addClass('selected');
        $('#atlasCategoryList dd:first').css({display:"block"}).addClass('open');        
        $('#atlasCategoryList dt').bind('click',function(){
            if($(this).hasClass('selected')){
                $(this).removeClass('selected');
                $(this).next().removeClass('open').css({display:"none"});
            }else {
                $(this).addClass('selected');
                $(this).next().css({display:"block"}).addClass('open').css({height:'auto'});
            }
            $(".category-list").mCustomScrollbar('update');
        })

        $(".category-list").mCustomScrollbar('update');
    }


    /**
     * 目录内搜索
     * @type {Function}
     * @returns {boolean}
     * @private
     */
    function searchAction(){
        modValue.options.searchKey = $('#searchInput').val();

        if(modValue.options.searchKey == '' || modValue.options.searchKey == '请输入关键字'){
            $('#atlasCategoryList li').css({display:'block'});
            $('#cleanSearch').hide();
            return false;
        };
        
        if((/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\s]/g).test(modValue.options.searchKey)){
            alert('名称只能包含英文、数字、中文');
            $('#searchInput').focus();
            return false;
        }

        $('#cleanSearch').show();

        var first = true;

        $('#atlasCategoryList li').each(function(){
            if($(this).find('a').text().indexOf(modValue.options.searchKey) === -1){
                $(this).css({display:'none'});
            }else {
                $(this).css({display:'block'});
                if(first){
                    $('#atlasCategoryList dd ul li .selected').removeClass('selected');
                    $(this).find('a').addClass('selected');
                    getThematicData($(this).find('a').attr('tid'));
                    first = false;
                    var parentDt = $('#atlasCategoryList dd ul li .selected').parent().parent().parent().prev();

                    if(!parentDt.hasClass('selected')){
                        $('#atlasCategoryList dt.selected').removeClass('selected');
                        var ddHeight = $('#atlasCategoryList .open').height();
                        parentDt.addClass('selected');
                        parentDt.next().css({display:"block"}).addClass('open').animate({height:ddHeight},200);
                    };

                }
            }
        })
        $(".category-list").mCustomScrollbar('update');
    }

    /**
     * AJAX获取相应GUID的专题图数据
     * @type {Function}
     * @param guid {Number} guid
     * @private
     */
    function getThematicData(guid){
        ATLAS.V.loading.load();
        var ajaxUrl = onemapUrlConfig.thematicDataServerUrl+'/production/metadata?production_id='+guid
        $.ajax({
            type:"get",
            dataType:'jsonp',
            url:ajaxUrl,
            success:function(data){
                ATLAS.V.loading.loaded();
                modValue.currentThematicData = data.metadata;
                //添加专题图到地图容器中
                addThematicToMap();
            },
            error:function(data){
                ATLAS.V.loading.loaded();
                ATLAS.C.publisher.publish({type:'error',message:'获取地图数据失败！'},'noteBar::add');
            }
        });
    }

    /**
     * 地图初始化
     * @type {Function}
     * @private
     */
    function mapInit(){
        var mapOptions = {
            center: [0, 0],
            zoom: 5,
            zoomControl: false,
            worldCopyJump: false
        };

        map = new L.Map(
            'mapHolder',
            mapOptions
        );

        //添加专题图容器
        thematicFeatureGroup = L.featureGroup();
        thematicFeatureGroup.addTo(map);

    }

    /**
     * 添加专题图到地图容器中
     * @type {Function}
     * @private
     */
    function addThematicToMap(){
        var obj = modValue.currentThematicData;
        thematicFeatureGroup.clearLayers();
        var _boundsLatlng = JSON.parse(obj.bounds);
        var _bounds = new L.LatLngBounds(new L.LatLng(_boundsLatlng[1],_boundsLatlng[0]),new L.LatLng(_boundsLatlng[3],_boundsLatlng[2]));
        
        obj.titleLayer = L.tileLayer(onemapUrlConfig.thematicTileUrl+'/'+obj.production_id+'?l={z}&x={x}&y={y}',{
            minZoom:obj['min_zoom_level'],
            maxZoom:obj['max_zoom_level'],
            subdomains: map23DConfig.tileSubdomains||'',
            noWrap:true,
            errorTileUrl:''
        });
        obj.titleLayer.addTo(thematicFeatureGroup);

        map.invalidateSize();

        map.setView(_bounds.getCenter(),parseInt(obj['min_zoom_level']));
                
        $('#atlasInfoDetail .content').empty();        
        $('<h3>'+obj.map_name+'</h3>').appendTo($('#atlasInfoDetail .content'));
        $('<p>作者: '+obj.author+'</p>').appendTo($('#atlasInfoDetail .content'));

        $('<p>出版社: '+obj.publisher+'</p>').appendTo($('#atlasInfoDetail .content'));

        $('<p>出版时间: '+obj.publication_date+'</p>').appendTo($('#atlasInfoDetail .content'));

        $('<p>所属图集: '+obj.original_atlas+'</p>').appendTo($('#atlasInfoDetail .content'));

        $('<p>地图页码: '+obj.original_page+'</p>').appendTo($('#atlasInfoDetail .content'));

        $('<p>扫描分辨率: '+obj.scan_dpi+' DPI</p>').appendTo($('#atlasInfoDetail .content'));

        $('<p>比例尺分母: '+obj.scale_denominator+'</p>').appendTo($('#atlasInfoDetail .content'));
        if(obj.map_theme_id != 100){
            $('<p>主题分类: '+['','自然','政区','交通','旅游','基础设施','人口经济','社会生活','生态环境','其他','新闻'][obj.map_theme_id]+'</p>').appendTo($('#atlasInfoDetail .content'));
        }else {
            $('<p>主题分类: 其他</p>').appendTo($('#atlasInfoDetail .content'));
        }
        
        
        if($('#atlasInfoDetail .content').children().length === 0){
            $('#atlasInfoDetail').hide();
        }else {
            $('#atlasInfoDetail').show();
        }


        //添加到全部详情
        $('#atlasInfoDetailAll .content').empty();
        $('<p>作者: '+obj.author+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>出版社: '+obj.publisher+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>出版时间: '+obj.publication_date+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>所属图集: '+obj.original_atlas+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>地图名称: '+obj.map_name+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>地图页码: '+obj.original_page+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>扫描分辨率: '+obj.scan_dpi+' DPI</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>查看权限: '+['','公开','内部','秘密','机密','绝密'][obj.read_level]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        if(obj.map_theme_id != 100){
            $('<p>主题分类: '+['','自然','政区','交通','旅游','基础设施','人口经济','社会生活','生态环境','其他','新闻'][obj.map_theme_id]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        }else {
            $('<p>主题分类: 其他</p>').appendTo($('#atlasInfoDetailAll .content'));
        }
        $('<p>查看次数: '+obj.view_total+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>比例尺分母: '+obj.scale_denominator+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>地图图片的高度: '+obj.map_image_height+' 像数</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>地图图片的宽度: '+obj.map_image_width+' 像数</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>最大显示级别: '+obj.max_zoom_level+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>最小显示级别: '+obj.min_zoom_level+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>产品状态: '+['初始状态','正在上传/处理文件','正常','禁用','','待删','发布'][obj.production_state]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>产品类型: '+['单幅专题图','单幅无坐标图片','基础地图','图对','系列图','图集'][obj.production_type]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>推荐度: '+obj.recommended+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>是否允许删除: '+(obj.allow_del?'是':'否')+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>图像存储的格式: '+obj.image_format+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>生产时输入图像存储的品质: '+obj.image_quality+'%</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>区域名称编码: '+obj.region_name_id+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>区域尺度: '+['其它','世界','大洲大洋','国家','省','市','县','城市'][obj.region_scale_id]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>资料年代: '+obj.data_date+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>印刷时间: '+obj.printing_date+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>印刷长度: '+obj.printing_length+' 厘米</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>印刷宽度: '+obj.printing_width+' 厘米</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>坐标系: '+obj.coordinate_system+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p style="word-wrap:break-word ;">投影参数:<br/>'+obj.projcs+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        //$('<p>投影信息是否准确: '+(obj.coordinate_system_accurately?'是':'否')+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        //$('<p>比例尺是否准确: '+(obj.scale_accurately?'是':'否')+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>是否透明层（覆盖层）: '+(obj.is_overlay?'是':'否')+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>地图数据类型: '+['','栅格','矢量','DEM'][obj.data_type]+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>数据版本: '+obj.data_version+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>设备显示DPI: '+obj.device_dpi+' DPI</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>设备ID: '+obj.device_id+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>设备名称: '+obj.device_name+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>设备显示分辨率(高度): '+obj.device_resolution_height+' 像数</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>设备显示分辨率(宽度): '+obj.device_resolution_width+' 像数</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>设备显示屏尺寸: '+obj.device_screen_size+' 英寸</p>').appendTo($('#atlasInfoDetailAll .content'));        //$('<p>数据id: '+obj.data_id+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>唯一标识码: '+obj.production_id+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>文件分包: '+obj.base_list+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>存储地址: '+obj.storage_path+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>存储类型: '+obj.storage_type+'</p>').appendTo($('#atlasInfoDetailAll .content'));
        $('<p>瓦片经纬度范围: '+obj.bounds+'</p>').appendTo($('#atlasInfoDetailAll .content'));



        //添加说明
        obj.desc_id_list = JSON.parse(obj.desc_id_list);
        $('#atlasInfoIntro .content').empty();
        if(obj.desc_id_list.length > 0){
            for(var i =0 , l = obj.desc_id_list.length; i<l; i++){
                var img = $('<img src="'+onemapUrlConfig.libServerUrl+'/production/thumb?production_id='+obj.production_id+'&thumb_id='+obj.desc_id_list[i]+'"/>');
                img.appendTo($('#atlasInfoIntro .content'));
            }
            $('#atlasInfoIntro').show();
        }else {
            $('#atlasInfoIntro').hide();
        }

        //添加图例
        obj.legend_id_list = JSON.parse(obj.legend_id_list);
        $('#atlasInfoLegend .content').empty();
        if(obj.legend_id_list.length > 0){
            for(var i =0 , l = obj.legend_id_list.length; i<l; i++){
                var img = $('<img src="'+onemapUrlConfig.libServerUrl+'/production/thumb?production_id='+obj.production_id+'&thumb_id='+obj.legend_id_list[i]+'"/>');
                img.appendTo($('#atlasInfoLegend .content'));
            }
            $('#atlasInfoLegend').show();
        }else {
            $('#atlasInfoLegend').hide();
        }

        $(".info-list").mCustomScrollbar('update');

    }

    /**
     * 注册订阅
     * @type {Function}
     * 推送：ATLAS.C.publisher.publish(options,'atlasView::type');
     * 订阅：ATLAS.C.publisher.subscribe(layoutResize,'sideBarLayoutChange');
     */
    function subscribe(){
        ATLAS.C.publisher.subscribe(function(){
            map.invalidateSize();
        },'atlasView::layoutResize');
    }

    /**
     * 取消订阅
     * @type {Function}
     * 取消订阅：ATLAS.C.publisher.unSubscribe(layoutResize,'sideBarLayoutChange');
     */
    function unSubscribe(){}

    /**
     * 模块移除
     * @return {[type]} [description]
     */
    function remove(){

        //取消订阅
        //unSubscribe();
    }

    
    return ATLAS.M.atlasView = {
        init:init,
        layoutResize:layoutResize
    }
});