czapp/pages/amap/route/route.js

(function () {
    var page = {
        init: function ($page) {
            //页面初始化

           learun.layer.loading(true, "加载数据中");


			
            //播放控制相关事件清除
            function removeEvents(){
                $(".icon-bofang").off("tap");
                $(".icon-last").off("tap");
                $(".icon-next").off("tap");
                $(".speed-set").off("tap");
            }


            //地图初始化
            var routeMap = new AMap.Map('route-map', {
                center: [117.000923, 36.675807],
                zoom: 15
            });

            routeMap.on('complete', function(){
				learun.layer.loading(false);
			});



            //test
            var initPage = function(PathSimplifier, data) {

                if(!data){
                    window.pathSimplifierIns.setData([]);
                    window.pathSimplifierIns = null;
                    return;
                }

                removeEvents();
                console.log
                if(window.pathSimplifierIns){
                    window.pathSimplifierIns.setData([]);
                    window.pathSimplifierIns = null;
                }
                //创建组件实例
                var pathSimplifierIns = new PathSimplifier({
                    zIndex: 100,
                    map: routeMap, //所属的地图实例
                    getPath: function(pathData, pathIndex) {
                        //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
                        // return pathData.path;
                        
                        var points = pathData.points,
                            lnglatList = [];

                        for (var i = 0, len = points.length; i < len; i++) {
                            lnglatList.push(points[i].lngLat);
                        }

                        return lnglatList;
                    },
                    renderOptions: {
                        //轨迹线的样式
                        pathLineStyle: {
                            strokeStyle: 'red',
                            lineWidth: 6,
                            dirArrowStyle: true
                        }
                    }
                });
            

                pathSimplifierIns.setData(data);
                
                console.log(pathSimplifierIns.getPathNavigators());
                //创建一个巡航器
                var navg0 = pathSimplifierIns.createPathNavigator(0, //关联第1条轨迹
                    {
                        loop: false, //循环播放
                        speed: 1000
                    });
                

                //播放速度控制
                $page.find('.speed-set').on('tap', function () {
                    var speedSign = $page.find('#speed-icon');

                    if(speedSign.hasClass('icon-beisu1')){
                        speedSign.removeClass('icon-beisu1');
                        speedSign.addClass('icon-beisu2');
                        $page.find('.speed-level').html('中速');
                        navg0.setSpeed(2*10000);
                    }else if(speedSign.hasClass('icon-beisu2')){
                        speedSign.removeClass('icon-beisu2');
                        speedSign.addClass('icon-beisu4');
                        $page.find('.speed-level').html('快速');
                        navg0.setSpeed(4*10000);
                    }else if(speedSign.hasClass('icon-beisu4')){
                        speedSign.removeClass('icon-beisu4');
                        speedSign.addClass('icon-beisu1');
                        $page.find('.speed-level').html('慢速');
                        navg0.setSpeed(10000);
                    }
                });

                // 播放暂停切换
                $page.find('.icon-bofang').on('tap', function () {
                    var playSign = $page.find('#play-pause');
                    if(playSign.hasClass('icon-bofang')){
                        playSign.removeClass('icon-bofang');
                        playSign.addClass('icon-zanting');
                        if(navg0.getNaviStatus() == 'stop'){
                            navg0.start();
                        }else{
                            navg0.resume();
                        }
                    }else{
                        playSign.removeClass('icon-zanting');
                        playSign.addClass('icon-bofang');
                        navg0.pause();
                    }
                });

                //节点控制
                $page.find('.icon-last').on('tap', function () {
                    if(navg0.getNaviStatus() == 'stop'){
                        return;
                    }
                    if(navg0.getNaviStatus() == 'moving'){
                        navg0.pause();
                        // $('#play-pause').removeClass('icon-zanting');
                        // $('#play-pause').addClass('icon-bofang');
                    }
                    //当前节点索引
                    var presentNode = navg0.getCursor().idx;
                    if(presentNode == 0){
                        navg0.moveToPoint(0, 0);
                        return;
                    }

                    navg0.moveToPoint(presentNode-1, 0);
                    pathSimplifierIns.render();
                });
                $page.find('.icon-next').on('tap', function () {
                    if(navg0.getNaviStatus() == 'stop'){
                        return;
                    }
                    if(navg0.getNaviStatus() == 'moving'){
                        navg0.pause();
                        // $('#play-pause').removeClass('icon-zanting');
                        // $('#play-pause').addClass('icon-bofang');
                    }

                    var endNode = navg0.getPathEndIdx();
                    var presentNode = navg0.getCursor().idx;
                    if(presentNode == endNode){
                        return;
                    }

                    navg0.moveToPoint(presentNode+1, 0);
                    pathSimplifierIns.render();
                });


                //检测末端
                navg0.on('pause', function(){
                    $('#play-pause').removeClass('icon-zanting');
                    $('#play-pause').addClass('icon-bofang');                    
                });
                // $page.find('.text-area').on('tap', function(){
                //     navg0.destroy();

                // });

                window.pathSimplifierIns = pathSimplifierIns;
    
            }
            
            AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier) {

                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas！');
                    return;
                }

                $page.find('.date-set').rldate({
                    type: 'date'
                },function(date){


                    
                    // $page.find('.f-dtpicker-ok').on('tap', function(){
                        
                    // });
                    var pattern = /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/;
                    

                    if(!pattern.test(date)){
                        learun.layer.toast('请选择正确轨迹的日期');
                        return;
                    }


                    var post_data = {
                        "date":date,
                        "deviceNumber":'868500028325363'
                    }
                    learun.httppost(config.webapi+'?s=api/get_gps_route',post_data,function(res){
                        if(!res.success){
                            learun.layer.toast(res.message);
                        }
                        var data = null;
                        if(res.data){
                            data = [{name:'test1',points:[]}];
                            JSON.parse(res.data).forEach(v => {
                               data[0].points.push({speed:v.speed, lngLat:[v.lng, v.lat]});
                            });
                            console.log(data);
                        }
                        
                        initPage(PathSimplifier, data);
					});
                });

                // $page.find('.lr-btn-primary').on('tap', function(){
                //     var date = $('#date2')[0].innerText;
                //     console.log(date);

                //     $('.widthset').hide();
                //     $('.outcase').show();


    
                // });




                //日期格式化
            Date.prototype.Format = function(fmt)   
                { //author: meizz   
                    var o = {   
                        "M+" : this.getMonth()+1,                 //月份   
                        "d+" : this.getDate(),                    //日   
                        "h+" : this.getHours(),                   //小时   
                        "m+" : this.getMinutes(),                 //分   
                        "s+" : this.getSeconds(),                 //秒   
                        "q+" : Math.floor((this.getMonth()+3)/3), //季度   
                        "S"  : this.getMilliseconds()             //毫秒   
                    };   
                    if(/(y+)/.test(fmt))   
                        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
                    for(var k in o)   
                        if(new RegExp("("+ k +")").test(fmt))   
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
                    return fmt;   
                }  
            
                //启动页面
                // initPage(PathSimplifier);
                // 6789012345
                var nowDate = new Date().Format("yyyy-MM-dd");
                console.log(nowDate);
                var post_data = {
                    "date": nowDate,
                    "deviceNumber":'6789012345'
                }
                learun.httppost(config.webapi+'?s=api/get_gps_route',post_data,function(res){
                    if(!res.success){
                        learun.layer.toast(res.message);
                        return;
                    }
                    var data = [{name:'test1',points:[]}];
                    JSON.parse(res.data).forEach(v => {
                        data[0].points.push({speed:v.speed, lngLat:[v.lng, v.lat]});
                    });
                    console.log(data);

                    learun.initPage(PathSimplifier, data);
                });

            });

            


            


        }
    };

    return page;
})();