使用GMap.NET類庫，實作地圖軌迹回放。(WPF版)

前言

實作軌迹回放，GMap.NET有對應的類GMapRoute。這個類函數很少，功能有限，隻能實作簡單的軌迹回放。要實作更複雜的軌迹回放，就需要自己動手了。

本文介紹一種方法，可以實作複雜的軌迹回放。有句話“功夫在詩外”，GMap.NET給你提供了基本地圖處理功能；但是不要讓CMap.NET束縛了手腳。你需要有深刻了解地圖實作原理，深入了解WPF動畫的原理,才能到達随心所欲。最終的效果如下：

GMap.NET 顯示原理

地圖就是由許多方格“瓦片”組合而來。當你移動或縮放時，GMap.NET會根據目前位置、顯示視窗、縮放級别，到地圖伺服器擷取圖檔。是以地圖控件本質上就是顯示圖檔的控件，隻是這些圖檔包含了坐标資訊。

地圖上加軌迹，就是在圖檔上畫線。這些線要與gps坐标點吻合。通過GMapMarker不僅可以加标注，也可以實作軌迹。需要将gps坐标點轉換成控件的坐标點，再連成線就可以了。本文就是通過GMapMarker實作了軌迹回放。

 1  實作軌迹顯示

 通過自定義控件UserControlMapRoute實作了軌迹顯示功能。需要将此控件加入到GMapMarker。

GMapMarker _routeMaker = new GMapMarker(point);
 UserControlMapRoute routeCtrl = new UserControlMapRoute() { Marker = _routeMaker, MapCtrl = MainMap };
 routeCtrl.Init();
 _routeMaker.Shape = routeCtrl;
  //将圖層添加到地圖
 this.MainMap.Markers.Add(_routeMaker);      

UserControlMapRoute有兩個功能：顯示軌迹起始點，顯示軌迹。将軌迹顯示功能放在類MapRoutePath中實作。該類實作的功能就是根據gps坐标顯示軌迹。該類包含的變量有：

class MapRoutePath
    {
        public GMapControl MapCtrl { get; private set; } //地圖控件
        public Panel ParentPanel { get; private set; }   //父面闆，将PathRouteLine加入面闆。

        public Path PathRouteLine { get; private set; } //顯示軌迹

        List<PointLatLng> _listGpsPoint = new List<PointLatLng>();
        List<Point> _listCtrlPt = new List<Point>();

        public List<PointLatLng> ListGpsPoint => _listGpsPoint; //包含的gps坐标
        public List<Point> ListPathPoint => _listCtrlPt;        //轉換成立控件坐标
}      

實作軌迹功能是變量PathRouteLine，該變量的父控件是ParentPanel（就是控件UserControlMapRoute 中的根Grid控件）。MapCtrl 控件主要作用就是提供了将gps坐标轉換成控件坐标的函數。

實作将gps做标注轉換成控件坐标的方法：

private void ToLocalPoint()
        {
            //_listGpsPoint存儲所gps坐标 _listCtrlPt存儲轉換後控件坐标
            _listCtrlPt.Clear();
            foreach (PointLatLng pt in _listGpsPoint)
            {
                Point ptGrid = ToCtrlPoint(pt);
                _listCtrlPt.Add(ptGrid);
            }
        }

        Point ToCtrlPoint(PointLatLng gpsPoint)
        {
            //轉換成GMap.NET控件坐标
            GPoint ptOfMapCtrl = MapCtrl.FromLatLngToLocal(gpsPoint);

            //GMap.NET控件坐标要轉換成 控件相對于直接父面闆的坐标
            Point ptToMapCtrl2 = new Point(ptOfMapCtrl.X, ptOfMapCtrl.Y);
            Point ptOfScreen = MapCtrl.PointToScreen(ptToMapCtrl2);
            Point ptOfParentPanel = ParentPanel.PointFromScreen(ptOfScreen);

            return ptOfParentPanel;
        }      

坐标轉換過程就是： GPS坐标 --》 GMap.NET控件坐标 --》 螢幕坐标 --》 控件相對于直接父面闆的坐标。擷取了控件坐标，就根據這些坐标畫直線就行了。

private static void CreatPath(Path path, List<Point> listPt)
        {
            if (listPt.Count <= 1)
            {
                path.Data = null;
                return;
            }

            PathFigure pathFigure = new PathFigure();
            pathFigure.StartPoint = listPt[0]; //起始點

            for (int i = 1; i < listPt.Count; i++)
            {
                //加入線段
                LineSegment line = new LineSegment() { Point = listPt[i] };
                pathFigure.Segments.Add(line);
            }

            PathGeometry geometry = new PathGeometry();
            geometry.Figures.Add(pathFigure);
            path.Data = geometry;
        }      

2 實作軌迹回放.

要實作兩個功能：通過不同的線顔色來訓示目前行動軌迹；提示目前所在的位置、用時等資訊的tip框。

軌迹移動 假如顯示軌迹的線顔色為紅色，通過綠色來顯示目前經過的位置。再增加一個變量_pathMoveRouteLine（類型也為Path） 就可以了。_pathMoveRouteLine的顔色為綠色，所顯示的路徑要和PathRouteLine 路徑完全相同。_pathMoveRouteLine路徑長度要實時計算出來，随着時間推移，路徑不斷變長。需要增加一個定時器，不停的計算目前所在的位置。在定時器中，調用函數ShowRouteMove();

private void ShowRouteMove()
        {
            //線路總長度
            double totalDistance = GetDistance();
            if (totalDistance == 0)
                return;

            //更加時間，計算目前走過的長度
            TimeSpan span = DateTime.Now - _startMoveTime;
            double curDistance = _moveSpeed * span.TotalHours;
            if (curDistance > totalDistance)
            {
                StopMove();
                curDistance = totalDistance;
            }


            Path path = CreateMovePath();
            //根據已走過的距離，擷取需要顯示的點
            List<Point> listCtrlPoint = GetListByDistance(curDistance);
            CreatPath(path, listCtrlPoint);

            ShowMoveTip(listCtrlPoint.Last(), curDistance);
        }      

//根據目前移動的距離，擷取相應的控件坐标
        private List<Point> GetListByDistance(double distance)
        {
            List<Point> result = new List<Point>();

            double start = 0;
            int i = 0;
            PointLatLng lastPt = new PointLatLng();
            foreach (PointLatLng pt in ListGpsPoint)
            {
                i++;
                if (i == 1) //第一個點
                {
                    result.Add(ToCtrlPoint(pt));
                    lastPt = pt;
                    continue;
                }
                else
                {
                    double lineDistance = MapHelper.GetDistance(lastPt, pt);
                    lastPt = pt;
                    if (lineDistance == 0)
                        continue;

                    if ((start + lineDistance) == distance) //gps坐标恰好符合目前的距離
                    {
                        result.Add(ToCtrlPoint(pt));
                        break;
                    }
                    else if ((start + lineDistance) < distance) //目前的點小于需要的距離
                    {
                        result.Add(ToCtrlPoint(pt));
                        start += lineDistance;
                    }
                    else
                    {
                        //最終的點 落在兩個gps點之間，需要進一步計算
                        double midDistance = distance - start;
                        double rate = midDistance / lineDistance;

                        Point endPoint = ToCtrlPoint(pt);
                        Point midPoint = MapHelper.GetMidPoint(result.Last(), endPoint, rate);
                        result.Add(midPoint);
                        break;
                    }
                }
            }
            return result;
        }      

class MapHelper
    {
        //根據兩點坐标，和在這兩點之間的比例，擷取計算後的坐标
        internal static Point GetMidPoint(Point start, Point end, double rate)
        {
            Point result = new Point();
            result.X = start.X + rate * (end.X - start.X);
            result.Y = start.Y + rate * (end.Y - start.Y);
            return result;
        }
    }      

提示框顯示 提示框所在的位置就是移動軌迹的最後一個點的位置。為了更好的顯示效果，對這個坐标做一定的偏移：

UserControlMoveTip _userControlMoveTip;
        private void ShowMoveTip(Point startPoint,double moveDistance)
        {
            if(_userControlMoveTip == null)
            {
                _userControlMoveTip = new UserControlMoveTip();
                _userControlMoveTip.HorizontalAlignment = HorizontalAlignment.Left;
                _userControlMoveTip.VerticalAlignment = VerticalAlignment.Top;
                ParentPanel.Children.Add(_userControlMoveTip);
            }

            if (_userControlMoveTip.ActualHeight == double.NaN)
            {
                _userControlMoveTip.Visibility = Visibility.Hidden;
                return;
            }

            _userControlMoveTip.Visibility = Visibility.Visible;
            _userControlMoveTip.TotalDistance = GetDistance();
            _userControlMoveTip.TotalTimeSpan = TimeSpan.FromHours(_userControlMoveTip.TotalDistance / _moveSpeed);
            _userControlMoveTip.MoveSpeed = _moveSpeed;
            _userControlMoveTip.MoveDistance = moveDistance;
            _userControlMoveTip.TimeElapse = (DateTime.Now - _startMoveTime);

            _userControlMoveTip.Margin = new Thickness(startPoint.X+5, startPoint.Y - _userControlMoveTip.ActualHeight-2, 0, 0);
        }      

_userControlMoveTip是使用者控件，用來顯示總距離、已移動距離、移動時間等資訊。      

JAVA&NET技術QQ群号：456257217有問題的可以在群裡面提問。