高德地圖--軌跡回放(一)

高德地圖實現軌跡回放的方式之一：使用高德地圖官方api中UI組件庫中的軌跡展示。通過軌跡展示創建巡航器，實現軌跡回放。創建巡航器實現軌跡回放的好處就是回放速度隨時控制隨時變化，不好的瀏覽器必須支持canvas（IE8及以下不支持）。效果圖如下：

看主要的代碼

AMapUI.load(['ui/misc/PathSimplifier'], function    (PathSimplifier) {

        if (!PathSimplifier.supportCanvas) {
         alert('當前環境不支持 Canvas！');
         return;
     }
    //回放路徑等配置項，參考官方api
    var defaultRenderOptions = {
            pathNavigatorStyle: {
                width:16,
                height:16,
                autoRotate:true,
                lineJoin:'round',
                content:'defaultPathNavigtor',
                fillStyle:'#087EC4',
                strokeStyle:'#116394',
                lineWidth:1,
                pathLinePassedStyle: {
                    lineWidth:2,
                    strokeStyle:'rgba(0, 160, 220, 0.8)',
                    borderWidth:1,
                    borderStyle:'#eee',
                    dirArrowStyle:false
                }
            }
        };

    var pathSimplifierIns = new PathSimplifier({
        zIndex: 100,
        map: map, 
        getPath: function(pathData, pathIndex) {
            return pathData.path;
        },
        getHoverTitle: function(pathData, pathIndex, pointIndex) {
            //返回鼠標懸停時顯示的信息
            if (pointIndex >= 0) {
                //鼠標懸停在某個軌跡節點上
                return pathData.name + '，點:' + pointIndex + '/' + pathData.path.length;
            }
            //鼠標懸停在節點之間的連線上
            return pathData.name + '，點數量' + pathData.path.length;
        },
        renderOptions: defaultRenderOptions
    });

    window.pathSimplifierIns = pathSimplifierIns;
    //根據數據來繪制路線
    pathSimplifierIns.setData([{
        name: '軌跡',
        path: lineArr
    }]);
    //創建巡航器
    var navg = pathSimplifierIns.createPathNavigator(0,{
            loop: true,//是否循環播放
            speed: parseInt(speed.value),//回放速度控制，這里使用的是select下拉列表value值控制
            pathNavigatorStyle: {
                width:24,
                height:24,
                content: PathSimplifier.Render.Canvas.getImageContent('image/plane.png'),//自定義巡航器樣式
                strokeStyle:null,
                fillStyle:null
            }
        });
    //控制播放按鈕
       start.onclick =    function  (){
            navg.start();
        }
        
    pause.onclick =    function  (){
            navg.pause();
            
            alert('當前為止走過的距離'+parseInt(navg.getMovedDistance()/1000)+'KM,回放速度為:'+parseInt(navg.getSpeed())+'Km/h');
            
        }

    resume.onclick =    function (){
            navg.resume();

        }
    stop.onclick =    function (){
            navg.stop();
        
        }
    
    
        //下拉列表value值改變速度改變
        speed.onchange=function(){
            var spe = speed.value;
            navg.setSpeed(spe);
            
        };

    //起點終點標記
    var startPot = lineArr[0];
        
      var endPot = lineArr[lineArr.length-1];
          
      var stmarker = new AMap.Marker({
            map: map,
            position: [startPot[0], startPot[1]], //基點位置
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
            zIndex: 10
        });
        var endmarker = new AMap.Marker({
            map: map,
            position: [endPot[0], endPot[1]], //基點位置
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
            zIndex: 10
        });

});

以上就是高德地圖實現軌跡回放方法之一。此高德地圖UI組件需要在服務器環境下運行，詳細代碼地址github,僅作學習總結只用！