研究高德地圖回放的感悟

高德地圖關于軌迹回放，一大堆的代碼真正的重點就是能有圖檔動的就是pathSimplifierIns.createPathNavigator（）； var navg1 = pathSimplifierIns.createPathNavigator(1, {

                loop: false,//控制循環

                speed: 1000000,

                pathNavigatorStyle: {

                    width: 24,

                    height: 24,

                    //使用圖檔

                    content: PathSimplifier.Render.Canvas.getImageContent('./imgs/plane.png', onload, onerror),

                    strokeStyle: null,

                    fillStyle: null,

                    //經過路徑的樣式

                    pathLinePassedStyle: {

                        lineWidth: 6,

                        strokeStyle: 'black',

                        dirArrowStyle: {

                            stepSpace: 15,

                            strokeStyle: 'red'

                        }

                    }

                }

            });

            navg1.start();、

                loop: false,//控制循環

                speed: 1000000,

                pathNavigatorStyle: {

                    width: 24,

                    height: 24,

                    //使用圖檔

                    content: PathSimplifier.Render.Canvas.getImageContent('./imgs/plane.png', onload, onerror),

                    strokeStyle: null,

                    fillStyle: null,

                    //經過路徑的樣式

                    pathLinePassedStyle: {

                        lineWidth: 6,

                        strokeStyle: 'black',

                        dirArrowStyle: {

                            stepSpace: 15,

                            strokeStyle: 'red'

                        }

                    }

                }

            });

            navg1.start();

一般的軌迹線

    var map = new AMap.Map('container', {

        zoom: 4

    });

    //加載PathSimplifier，loadUI的路徑參數為子產品名中 'ui/' 之後的部分 

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

    if (!PathSimplifier.supportCanvas) {

        alert('目前環境不支援 Canvas！');

        return;

    }

    var pathSimplifierIns = new PathSimplifier({

        zIndex: 100,

        map: map, //所屬的地圖執行個體

        getPath: function(pathData, pathIndex) {

            //傳回軌迹資料中的節點資訊，[AMap.LngLat, AMap.LngLat...] 或者 [[lng,lat],[lng,lat]...]

            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: {

            //軌迹線的樣式

            pathLineStyle: {

                strokeStyle: 'red',

                lineWidth: 6,

                dirArrowStyle: true

            }

        }

    });

    //這裡建構兩條簡單的軌迹，僅作示例

    pathSimplifierIns.setData([{

        name: '軌迹1',

        path: [

            [100.340417, 27.376994],

            [108.426354, 37.827452],

            [113.392174, 31.208439],

            [124.905846, 42.232876]

        ]

    }, {

        name: '大地線',

        //建立一條包括500個插值點的大地線

        path: PathSimplifier.getGeodesicPath([116.405289, 39.904987], [87.61792, 43.793308], 500)

    }]);