czapp/pages/amap/route/route.js

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

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

            $('#date-time').text('时间：'+param.lastTime);
            $('#vehicle-speed').text('速度：'+param.speed+'km/h')
			
            //播放控制相关事件清除
            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){
                    if( window.pathSimplifierIns){
                        window.pathSimplifierIns.setData([]);
                        window.pathSimplifierIns = null;
                    }

                    $page.find('.icon-bofang').on('tap', function () {
                        learun.layer.toast('当前日期无轨迹');
                    });

                    return;
                }

                removeEvents();
                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);
                
                //创建一个巡航器
                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();
                });

                //重置
                $page.find('.icon-reset').on('tap', function () {
                    navg0.moveToPoint(0, 0);
                    navg0.stop();
                });


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

                // });
                var pathData = pathSimplifierIns.getPathData(0).points;;
                navg0.on('move', function(){
                    var presentIndex = navg0.getCursor().idx;
                    var time = pathData[presentIndex].time;
                    var speed = pathData[presentIndex].speed;
                    $('#date-time').text('时间：'+time);
                    $('#vehicle-speed').text('速度：'+speed+'km/h');
                });

                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'
                    }
                    var geocoder = null;
                    learun.httppost(config.webapi+'?s=api/get_gps_route',post_data,function(res){
                        if(!geocoder){
                            geocoder = new AMap.Geocoder({
                                radius: 500 //范围，默认：500
                            });
                        }

                        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], time:v.deviceTime});
                            //    lngLats.push([v.lng, v.lat]);
                            });
                        }
                        
                       initPage(PathSimplifier, data);
					});
                });




            
                //启动页面
                // initPage(PathSimplifier);
                // 6789012345
                var nowDate = new Date().Format("yyyy-MM-dd");
                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);
                    }
                    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], time:v.deviceTime});
                        //    lngLats.push([v.lng, v.lat]);
                        });
                    }
                    initPage(PathSimplifier, data);
                });

            });

            


            


        }
    };

    return page;
})();