如何在旋转的自定义图像地图上绘制 gps 标记答案

【问题标题】：How to draw a gps marker on a rotated custom image map如何在旋转的自定义图像地图上绘制 gps 标记
【发布时间】：2016-12-28 08:44:37
【问题描述】：

我需要在我的应用程序中绘制一个公园的自定义图像地图，并在其上添加显示 gps 标记。

但是我的问题是地图应该在我的应用程序中绘制为直矩形（见左下角），但在现实生活中公园是旋转的（见右下角示例）

我有实时地图的所有 4 个角的 GPS 坐标以及标记的 GPS 坐标，但我不知道如何计算地图中每个标记的 (x,y) 位置我的应用程序，其中地图显示为直矩形。

欢迎提出任何建议！

到目前为止我的代码：

    public class GeoLocation
    {
        public double Lattitude { get; set; }

        public double Longitude { get; set; }

        public GeoLocation()
        {
        }

        public GeoLocation(double lat, double lon)
        {
            Lattitude = lat;
            Longitude = lon;
        }

        public double Angle(GeoLocation point)
        {
            var deltaX = point.Lattitude - Lattitude;
            var deltaY = point.Longitude - Longitude;
            return (Math.Atan2(deltaY, deltaX));
        }

        public GeoLocation Rotate(GeoLocation center, double angleInRad)
        {
            var s = Math.Sin(angleInRad);
            var c = Math.Cos(angleInRad);

            // translate point back to origin:
            var x = (double)(Lattitude - center.Lattitude);
            var y = (double)(Longitude - center.Longitude);

            // rotate point
            var xnew = x * c - y * s;
            var ynew = x * s + y * c;

            // translate point back:
            x = xnew + center.Lattitude;
            y = ynew + center.Longitude;
            return new GeoLocation(x, y);
        }
    }
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                var url = "file://c:\\db\\mapgrab.jpg";
                var bitmap = new BitmapImage();
                bitmap.BeginInit();
                bitmap.UriSource = new Uri(url, UriKind.Absolute);
                bitmap.CacheOption = BitmapCacheOption.OnLoad;
                bitmap.EndInit();
                mapImg.Source = bitmap;


                var TopLeftGps = new GeoLocation(52.11070994543701, 4.411896866166349);
                var TopRightGps = new GeoLocation(52.11475153599096, 4.415646979517055);
                var BottomRightGps = new GeoLocation(52.1117075980591, 4.424232274309553);
                var currentPosGps = new GeoLocation(52.11129692591393, 4.4174530542349295);

                var imageWidth = 702;
                var imageHeight = 924;
                var angle = TopLeftGps.Angle(TopRightGps);
                var topRight = TopRightGps.Rotate(TopLeftGps, -angle);
                var bottomRight = BottomRightGps.Rotate(TopLeftGps, -angle);
                var maxX = topRight.Lattitude - TopLeftGps.Lattitude;
                var maxY = bottomRight.Longitude - topRight.Longitude;

                var markerPos = new GeoLocation(currentPosGps.Lattitude, currentPosGps.Longitude).Rotate(TopLeftGps, -angle);
                var diffX = markerPos.Lattitude - TopLeftGps.Lattitude;
                var diffY = markerPos.Longitude - TopLeftGps.Longitude;
                var percentageX = diffX / maxX;
                var percentageY = diffY / maxY;
                var posX = percentageX * imageWidth;
                var posY = percentageY * imageHeight;


                var markerImg = new Border();
                markerImg.Background = new SolidColorBrush(Colors.Red);
                markerImg.Width = 32;
                markerImg.Height = 32;
                Canvas.SetLeft(markerImg, posX);
                Canvas.SetTop(markerImg, posY);
                canvas.Children.Add(markerImg);
            }
        }
    }

【问题讨论】：

标签： math gps

【解决方案1】：

您正在寻找的是从北对齐坐标(x,y) 到您的旋转坐标(x',y') 的二维旋转变换

旋转可以表示为 2x2 矩阵R，如果我们将坐标表示为列向量，那么计算将是：

[x',y']=R*[x,y]

* 是 matrix multiplication，R 是

角度 theta 是所需的旋转角度。

这样标记角点：

theta 可以通过求解来计算（例如在wolframAlpha）：

tan(theta) = (Ay-Dy) / (Ax-Dx)

【讨论】：

【解决方案2】：

我遇到了类似的问题。这是一个如何在地图上旋转点的 javascript 示例。坐标是从中心点开始测量的。角度以辐射为单位。

var x_new_centered = -1 * y_centered * Math.sin(a) + x_centered * Math.cos(a)
var y_new_centered = y_centered * Math.cos(a) + x_centered * Math.sin(a);

在这里您可以找到一个 jsfiddle，其中一个点绘制在未旋转、旋转和旋转和裁剪的地图上：https://jsfiddle.net/vienom/4ger35uq/

【讨论】：