czapp/pages/amap/route/route.js

(function () {
    var page = {
        init: function ($page) {
            //页面初始化
            $page.find('#date2').lrdate({
                type: 'date'
            });

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






            //地图初始化
            learun.routeMap = new AMap.Map('route-map', {
                center: [117.000923, 36.675807],
                zoom: 15
            });
            //test
            learun.initPage = function(PathSimplifier) {
                //创建组件实例
                learun.pathSimplifierIns = new PathSimplifier({
                    zIndex: 100,
                    map: learun.routeMap, //所属的地图实例
                    getPath: function(pathData, pathIndex) {
                        //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
                        return pathData.path;
                    },
                    renderOptions: {
                        //轨迹线的样式
                        pathLineStyle: {
                            strokeStyle: 'red',
                            lineWidth: 6,
                            dirArrowStyle: true
                        }
                    }
                });
            
                //这里构建两条简单的轨迹，仅作示例
                learun.pathSimplifierIns.setData([{
                    name: '轨迹0',
                    path: [
                        [100.340417, 27.376994],
                        [100.239417, 27.3764],
                        [100.238417, 27.386994],
                        [100.137417, 27.379994],
                        [100.436417, 27.396994],
                        [100.535417, 27.376694],
                        [100.134417, 27.374994],
                        [100.232417, 27.372994],
                        [100.331417, 27.376994],
                    ]
                }]);
            
                //创建一个巡航器
                var navg0 = learun.pathSimplifierIns.createPathNavigator(0, //关联第1条轨迹
                    {
                        loop: false, //循环播放
                        speed: 10000
                    });
                

                //播放速度控制
                $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);
                    learun.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);
                    learun.pathSimplifierIns.render();
                });




                $page.find('date-set').on('tap', function(){
                    // $('.outcase').hide();
                    $('.widthset').show();
                });
    
            }
            
            AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier) {

                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas！');
                    return;
                }
            
                //启动页面
                learun.initPage(PathSimplifier);

            });

            


            


        }
    };

    return page;
})();