TDataView_ui/scripts/mod/tools/toolWeatherMap.js

/**
 * @fileoverview 工具 云图动画 模块
 * @author Song.Huang
 * @version 1.0.0
 */
define(['html!templates/tools/toolWeatherMap',
        'css!styles/tools/toolWeatherMap'],
function(tpcLayout){
    /**
     * 状态值
     * @type {Boolean}
     * @default false
     * @private
     */
    var status ={
        initialized:false//是否初始化
    }
    /**
     * 模块数据 用于数据存储和外部调用
     * @type {Object}
     * 数据存放
     */
    var modValue ={
        weatherMapData:[],
        currentSelected:0,
        weatherMapLayerGuid:null,
        intervalTimer:null,
        timeStep:5000
    }
    /**
     * 初始化
     * 监听事件
     * @type {Function}
     */
    function init(options){
        remove();

        // modValue.weatherMapData = [
        //     {
        //         datetime:'2017-08-09 12:20',
        //         layerUrl:'http://mt.mmmaps.cn/v1.0/gh?z={z}&x={x}&y={y}'
        //     },
        //     {
        //         datetime:'2017-08-09 14:20',
        //         layerUrl:'http://mt.mmmaps.cn/v1.0/go?z={z}&x={x}&y={y}'
        //     },
        //     {
        //         datetime:'2017-08-09 15:20',
        //         layerUrl:'http://mt.mmmaps.cn/v1.0/gr?z={z}&x={x}&y={y}'
        //     },
        //     {
        //         datetime:'2017-08-09 16:20',
        //         layerUrl:'http://mt.mmmaps.cn/v1.0/gm?z={z}&x={x}&y={y}'
        //     }
        // ]

        for(var op in options){
            modValue[op] = options[op];
        }

        if(modValue.weatherMapData.length == 0){
            ONEMAP.C.publisher.publish({ type: 'warning', message: '没有云图数据' }, 'noteBar::add');
            return false;
        }

        if(!status.initialized){
            status.initialized = true;
            setLayout();
            bindEvent();
            actionEvent();
            subscribe();
        }

    };
    function setLayout(){
        $('body').append(tpcLayout);
        //绑定数据列表
        _.each(modValue.weatherMapData, function(el,index) {
            $('<li cid="'+index+'">'+el.datetime+'</li>').appendTo('#timePlayerControl .time-list ul');
        });
        
        $('#timePlayerControl .time-list').mCustomScrollbar();
    };
    function bindEvent(){

        $('#timePlayerControl .abtn-close').bind('click',function(){
            $("#userThematicList .thematic-layer-link").removeClass('selected');    
            remove();
        });

        $('#timePlayerControl .datetime-picker').bind('click',function(){
            $('#timePlayerControl .time-list').show();
        });

        $('#timePlayerControl .time-list').bind('mouseleave',function(){
            $('#timePlayerControl .time-list').hide();
        });

        $('#timePlayerControl .time-list li').bind('click',function(){
            rollPlay('stop');
            $('#timePlayerControl .datetime-picker').html($(this).html());
            $('#timePlayerControl .time-list').hide();
            modValue.currentSelected = $(this).attr('cid');
            actionEvent();
        });

        $('#timePlayerControl .player-control .prev-start').bind('click',function(){
            rollPlay('stop');
            modValue.currentSelected = 0;
            actionEvent();
        });

        $('#timePlayerControl .player-control .prev').bind('click',function(){
            if(modValue.currentSelected == 0){
                ONEMAP.C.publisher.publish({ type: 'warning', message: '已经到达第一条记录' }, 'noteBar::add');
                return false;
            }else {
                rollPlay('stop');
                modValue.currentSelected--;
                actionEvent();
            }            
        });

        $('#timePlayerControl .player-control .pause').bind('click',function(){
            rollPlay('stop');
            
        });
        $('#timePlayerControl .player-control .play').bind('click',function(){
            rollPlay('start');
            
        });

        $('#timePlayerControl .player-control .next').bind('click',function(){
            if(modValue.currentSelected == (modValue.weatherMapData.length-1)){
                ONEMAP.C.publisher.publish({ type: 'warning', message: '已经到达最后一条记录' }, 'noteBar::add');
                return false;
            }else {
                rollPlay('stop');
                modValue.currentSelected++;
                actionEvent();
            }            
        });

        $('#timePlayerControl .player-control .next-end').bind('click',function(){
            rollPlay('stop');
            modValue.currentSelected = modValue.weatherMapData.length-1;
            actionEvent();
        });
    };

    /**
     * 循环播放
     * @param  {[type]} op [description]
     * @return {[type]}    [description]
     */
    function rollPlay(op){
        if(op == 'stop'){
            clearInterval(modValue.intervalTimer);

            $('#timePlayerControl .player-control .pause').hide();
            $('#timePlayerControl .player-control .play').show();
        }
        if(op == 'start'){
            modValue.intervalTimer = setInterval(function(){
                modValue.currentSelected++;
                if(modValue.currentSelected == modValue.weatherMapData.length){
                    modValue.currentSelected = 0;
                }
                actionEvent();
            },modValue.timeStep);
            actionEvent();
            $('#timePlayerControl .player-control .pause').show();
            $('#timePlayerControl .player-control .play').hide();
        }
    }

    /**
     * 播放面板触发事件
     * @return {[type]} [description]
     */
    function actionEvent(){
        //先移除后添加
        if(modValue.weatherMapLayerGuid){
            removeWeatherLayer();
        }
        var layerOp = {
            layerUrl:modValue.weatherMapData[modValue.currentSelected]['layerUrl']
        }

        $('#timePlayerControl .datetime-picker').html(modValue.weatherMapData[modValue.currentSelected]['datetime']);

        addWeatherLayer(layerOp);
    }

    /**
     * 添加云图到地图上
     */
    function addWeatherLayer(options){
        var tdTileLayerUrl = options['layerUrl'].replace('{z}/{x}/{y}', '%d/%d/%d');
        tdTileLayerUrl = options['layerUrl'].replace('z={z}&x={x}&y={y}', 'z=%d&x=%d&y=%d');

        modValue.weatherMapLayerGuid = map23DControl.tileLayer({
                action: 'add',
                layer: {
                    url2D: options['layerUrl'],
                    url3D: tdTileLayerUrl,
                    imageType: 'png'
                }
            })
    }

    /**
     * 移除指定guid的云图
     * @return {[type]}           [description]
     */
    function removeWeatherLayer(){
        map23DControl.tileLayer({
                action: 'remove',
                guid:modValue.weatherMapLayerGuid
            })
        modValue.weatherMapLayerGuid = null;
    }

    /**
     * 注册监听
     */
     function subscribe(){

     }
    /**
     * 功能移除
     */
    function remove(options){  
        $('#timePlayerControl').remove();
        clearInterval(modValue.intervalTimer);  
        modValue.weatherMapData = [];
        modValue.currentSelected = 0;
        removeWeatherLayer();
        modValue.weatherMapLayerGuid = null;
        status.initialized = false;
    }

    return ONEMAP.M.toolWeatherMap = {
        init:init,
        remove:remove
    }
});