高德地图--轨迹回放(一)

高德地图实现轨迹回放的方式之一：使用高德地图官方api中UI组件库中的轨迹展示。通过轨迹展示创建巡航器，实现轨迹回放。创建巡航器实现轨迹回放的好处就是回放速度随时控制随时变化，不好的浏览器必须支持canvas（IE8及以下不支持）。效果图如下：

看主要的代码

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

        if (!PathSimplifier.supportCanvas) {
         alert('当前环境不支持 Canvas！');
         return;
     }
    //回放路径等配置项，参考官方api
    var defaultRenderOptions = {
            pathNavigatorStyle: {
                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: {
                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,仅作学习总结只用！