javascript - 在 JavaScript 中将纬度和经度映射到 Canvas 点

Question

我正在编写一个 AR 应用程序，其中用户从船长的 Angular 看到一艘船，如下所示

我想使用其他船只的坐标(如左侧的船只)，使用 Canvas 在图像顶部绘制船只。我遇到的问题是将纬度、经度映射到 Canvas 点。

我已经阅读了半正矢和方位 Angular 公式，但我不知道如何使用它们来完成我想要的事情。我知道用户正在查看的船只的纬度和经度，并尝试使用它们来计算另一艘船的 Canvas 点，但我无法让它工作。有什么想法吗？

Answer 1

在相机 View 中查找真实世界的对象。

这是最简单的答案，因为有许多未知因素会影响结果。

问题

该图片说明了我所理解的问题。

我们有 3 艘船(找到解决方案所需的最少数量)，标有红色 A、B、C。我们知道每艘船的纬度和经度。由于它们很接近，因此无需校正由于经度收敛而导致的任何失真。

绿线代表相机的 View ，图像通过镜头投影到 CCD 上(A 上方的绿线)，然后将 twp 灰线投影到船下方的相机屏幕上。

三 Angular 测量和三 Angular 形。

根据经度，我们可以找到每艘船到另一艘船的距离，从而得出三 Angular 形的边长。

var ships = {
    A : { lat : ?, long : ? },
    B : { lat : ?, long : ? },
    C : { lat : ?, long : ? },
}
var AB = Math.hypot(ships.A.lat - ships.B.lat, ships.A.long - ships.B.long);
var BC = Math.hypot(ships.C.lat - ships.B.lat, ships.C.long - ships.B.long);
var CA = Math.hypot(ships.A.lat - ships.C.lat, ships.A.long - ships.C.long);

插图三 Angular 形展示了如何在给定边长的情况下求出 Angular 的 Angular 。

为此，我们要寻找 Angular pheta

var pheta = Math.acos(BC * BC - AB * AB + CA * CA) / (-2 * AB * CA));

相机的视野。

现在我们需要一些额外的信息。这就是相机的视场(在图像中为绿线和红色视场)。您必须找到您正在使用的相机的这些详细信息。

典型的手机摄像头的焦距 (fl) 为 24-35 毫米等效值，并且了解 CCD 的相对尺寸，您可以通过 找到 FOV var FOV = 2 * Math.atan((CCD.width/2)/fl) 但这是有问题的，因为现代手机的厚度不到 10 毫米，而且 CCD 很小，实际尺寸是多少？

在不知道相机内部尺寸的情况下，您可以使用一个漫长而复杂的过程来确定 FOV，但可以轻松查找手机规范。

现在我们假设相机的 FOV 为 67 度(1.17 弧度)。如果相机的分辨率为1280，我们忽略镜头畸变，保持相机垂直并与目标处于同一水平，我们可以通过两艘船之间的 Angular 计算出两艘船之间的像素距离。

var FOV = 1.17; // radians the Field of View of the camera
var pixels = (1.17 / 1280) * pheta; // 1280 is horizontal resolution of display

现在我们在相机上得到了两艘船之间的像素距离。假设它们适合相机，我们就错过了一个更重要的信息。

轴承

我们需要知道相机作为方位指向哪个方向。只有当我们有了这些，我们才能找到船只。因此，我们假设手机上的 GPS 为您提供实时方位。我们需要的是其中一艘船的方位。

我必须深入挖掘我的文件才能找到这个，它没有来源或引用，所以只能按原样提供。它所拥有的只是 Haversin，因此假设这就是所使用的方法。

经过进一步挖掘，我发现了对可能源自 Calculate distance, bearing and more between Latitude/Longitude points 的原始源代码的引用。

function deg2rad(angle) {  return angle * 0.017453292519943295 }
function rad2deg(angle) {  return angle / 0.017453292519943295 }
//return bearing in radians.
function getBearing(lat1,lon1,lat2,lon2){
    var earth = 6371e3; 
    var lat1 = lat1.toRadians();
    var lat2 = lat2.toRadians();
    var lon1 = lon1.toRadians();
    var lon2 = lon2.toRadians();
    var latD = lat2-lat1;
    var lonD = lon2-lon1;
    var a = Math.sin(latD / 2) * Math.sin(latD / 2) +  Math.cos(lat1 ) * Math.cos(lat2) *  Math.sin(lonD / 2) * Math.sin(lonD / 2);
    var c = 2 * Math.atan2( Math.sqrt(a),  Math.sqrt(1-a) );
    return earth * c;
}

现在您可以获取您到其中一艘船的方位了。用它和你的方位来找出你和它之间的 Angular 差。

   var yourBearing = ?; // in radians
   var shipBBearing = getBearing(ships.A.lat, ships.A.long, ships.B.lat, ships.B.long);

现在得到 Angular 差

   var shipBAt = yourBearing - shipBBearing

了解像素 FOV

   var shipBPixelsFromCenter = (FOV / 1280) * shipBAt;

   var shipBXpos = 1280 / 2 - shipBPixelsFromCenter;
   // and from above the dif in pixels between ships is
   var shipCXpos = shipBXpos + pixels.

完成。