将(旋转的) ImageOverlay内的X和Y坐标转换为经纬度

Question

在阅读了投影的文档和一些失败的测试之后，我发现自己无法找到解决这个问题的方法。

所有的解决方案，我发现发挥的事实，x和y坐标是在参考墨卡托地图投影，但在本例中，他们从一个局部图像放置在地图上的一层。

假设我有一个400 at *200 at灰色图像，放置在使用ImageOverlay.Rotated的传单地图上的位置：

var topleft = L.latLng(41.604766, 0.606402);
var topRight = L.latLng(41.605107, 0.606858);
var bottomleft = L.latLng(41.604610, 0.606613);

此图像被放置在地图上，使用左上角、右上角和左下角坐标作为参考。

结果是一个向北稍微旋转的矩形。

如果我知道我把手机放在了100,50像素(原始图像的左角)，我怎么能把这个笛卡尔坐标转换成纬度和经度，让我的地图显示出来呢？

如果它是一个完全对齐的矩形，我想我可以得到topLeft角和bottomLeft角之间的差值，除以像素数，然后把结果乘以我手机的Y，得到纬度。使用先验值，我会把它乘以我手机的X，得到我手机的经度。

但考虑到它的形状是旋转的，世界并不平坦，而且我在地理和三角学方面真的很差，我不确定它是否足够精确。

最后我们说的是一部电话，而不是一栋大楼。几米外( 2-4)是可以的，一个积木的距离不是。

Answer 1

哦，你说的是我自己的Leaflet.ImageOverlay.Rotated。我很乐意帮忙。

您应该看看它的源代码。所有的数学都在那儿。让我们看一看代码的一些部分：

    var pxTopLeft    = this._map.latLngToLayerPoint(this._topLeft);
    var pxTopRight   = this._map.latLngToLayerPoint(this._topRight);
    var pxBottomLeft = this._map.latLngToLayerPoint(this._bottomLeft);

这是将三个lat长坐标转换为屏幕相对像素坐标.L.Layer很好地解释了“层点”的含义。

如果你是在飞机上工作，而不是在大地水准面上工作，你可以把这些计算替换成你想要的任何其他重新投影。换句话说:您可能需要将长时间的坐标转换为EPSG:3857球面墨卡托坐标(这是显示投影传单使用的)。如果这样做，以后可以将插入的EPSG:3857坐标转换为EPSG:4326“平原纬度-经度”坐标。

    // Calculate the skew angles, both in X and Y
    var vectorX = pxTopRight.subtract(pxTopLeft);
    var vectorY = pxBottomLeft.subtract(pxTopLeft);

CSS转换需要倾斜角度来正确地扭曲图像。这也许有违直觉，但ImageOverlay.Rotated使用的是skew()而不是rotate。但你不需要倾斜角度，你只需要那些微分矢量。

如果您想要可视化，vectorX是一个沿图像顶部(从左到右)的2D向量，而vectorY是沿着左侧(从上到下)的2D向量。

这些向量允许您获得图像中任意点的屏幕坐标，假设输入范围为(0..1，0..1) (0是图像的顶部或左侧，1是底部或右侧)。但是你可能不想用相对于图像的高度/宽度的数字来工作，因为在你的问题中你提到了像素。所以让我们抓取像素。

    var imgW = this._rawImage.width;
    var imgH = this._rawImage.height;

好的。我们已经从ImageOverlay.Rotated中提取了所需的所有数学数据。

现在，如果你把前面的向量除以像素的图像维数.

    var vectorXperPx = vectorX.divideBy(imgW);
    var vectorYperPx = vectorY.divideBy(imgW);

这些向量从原始图像的一个像素转到左边(x)或(y)下面的像素。因此，给定原始图像的像素(x，y)，相对于图像角的投影向量将是：

    var deltaVector = 
               xPixelCoordinate.scaleBy(vectorXPerPx)
          .add(yPixelCoordinate.scaleBy(vectorYPerPx))

这是从图像的左上角到图像的(xPixelCoordinate，yPixelCoordinate)像素的屏幕坐标向量。

现在，添加图像左上角的屏幕坐标，设置如下：

    var finalCoordinateForImagePixel = pxTopLeft.add(deltaVector);

由于我们使用latLngToLayerPoint，结果将相对于该参照系。想把它拿回来吗？简单：

    var finalCoordinateForImagePixelInLatLong = 
           map.layerPointToLatLng(finalCoordinateForImagePixel);

但考虑到它的形状是旋转的，世界并不平坦，而且我在地理和三角学方面真的很差，我不确定它是否足够精确。

如果您使用传单用于显示的坐标参考系统(EPSG:3857)，或者任何同态坐标系(像素相对于屏幕，像素相对于层起始点)，那么您就没有问题了。