我认为这是这个问题的最佳位置。

我正在尝试获取嵌入式 Google 街景 View 中任何点击点的航向和俯仰。

我唯一知道并可以获得的信息是:

• 视野(度)
• 中心点的航向和俯仰(以度为单位)以及 x 和 y 像素位置
• 鼠标点击的 x 和 y 像素位置

我在此处提供了一个带有简化测量值的屏幕截图作为示例:

我最初只是认为你可以将视野除以像素宽度以获得每个像素的度数，但它更复杂，我认为它与投影到球体内部有关，相机位于球心？

奖金，如果你能告诉我如何做相反的......

澄清: 目标不是将 View 移动到单击点，而是提供有关单击点的信息。每像素度数方法不起作用，因为视口(viewport)不是线性的。

我这里的值只是示例，但视野可以更大或更小(从 [0.something, 180] 开始，中心不固定，它可以是 [0, 360]和垂直[-90, 90]。点[0, 0]只是拍照时摄影师的航向(水平度)和俯仰(垂直度)，并不代表任何东西。

最佳答案

TL;DR:概念验证的 JavaScript 代码包含在这个答案的末尾。

航向和俯仰参数h0和 p0全景图像的方向对应于一个方向。通过使用焦距f相机缩放此方向矢量，可以获得 3D 坐标 (x0, y0, z0)位于 (u0, v0) 的视口(viewport)中心:

x0 = f * cos( p0 ) * sin( h0 )
y0 = f * cos( p0 ) * cos( h0 )
z0 = f * sin( p0 ) 

现在的目标是找到某个给定像素坐标 (u, v) 点的 3D 坐标在图像中。首先，将这些像素坐标映射到像素偏移 (du, dv) (向右和顶部)从视口(viewport)中心:

du = u - u0 = u - w / 2
dv = v0 - v = h / 2 - v

然后必须找到 3D 视口(viewport)的局部正交 2D 基。单位向量(ux, uy, uz)支持 x 轴(沿着航向增加的方向向右)和矢量 (vx, vy, vz)支持图像的 y 轴(沿间距增加的方向到顶部)。确定这两个向量后，视口(viewport)上点的 3D 坐标与 (du, dv) 匹配视口(viewport)中的像素偏移很简单:

x = x0 + du * ux + dv * vx
y = y0 + du * uy + dv * vy
z = z0 + du * uz + dv * vz

以及航向和俯仰参数h和 p对于这一点，然后是:

R = sqrt( x * x + y * y + z * z )
h = atan2( x, y )
p = asin( z / R )

最后得到两个单位向量(ux, uy, uz)和 (vx, vy, vz) ，通过航向和俯仰参数计算球坐标的导数 (p0, h0) ，应该得到:

vx = -sin( p0 ) * sin ( h0 )
vy = -sin( p0 ) * cos ( h0 )
vz =  cos( p0 ) 

ux =  sgn( cos ( p0 ) ) * cos( h0 )
uy = -sgn( cos ( p0 ) ) * sin( h0 )
uz = 0

哪里sgn( a )是+1如果a >= 0否则 -1 .

补充:

• 焦距由水平视野和图像的宽度得出:

  f = (w / 2) / Math.tan(fov / 2)
  

• 从航向和俯仰参数到像素坐标的反向映射可以类似地完成:

  1. 找到 3D 坐标 (x, y, z)与指定航向和俯仰参数相对应的射线方向，
  2. 找到 3D 坐标 (x0, y0, z0)对应于视口(viewport)中心的光线方向(关联的图像平面位于 (x0, y0, z0)，法线为 (x0, y0, z0))，
  3. 将指定航向和俯仰参数的光线与图像平面相交，这给出了视口(viewport)中心的 3D 偏移，
  4. 在本地投影此 3D 偏移，获得 2D 偏移 du和 dv
  5. map du和 dv到绝对像素坐标。

• 在实践中，这种方法似乎在方形和矩形视口(viewport)上同样有效。

概念验证代码(在包含具有“全景”id 的大小 Canvas 元素的网页上调用 onLoad() 函数)

'use strict';

var viewer;

function onClick(e) {
  viewer.click(e);
}

function onLoad() {
  var element = document.getElementById("panorama");
  viewer = new PanoramaViewer(element);
  viewer.update();
}

function PanoramaViewer(element) {
  this.element = element;
  this.width = element.width;
  this.height = element.height;
  this.pitch = 0;
  this.heading = 0;

  element.addEventListener("click", onClick, false);
}

PanoramaViewer.FOV = 90;

PanoramaViewer.prototype.makeUrl = function() {
  var fov = PanoramaViewer.FOV;

  return "https://maps.googleapis.com/maps/api/streetview?location=40.457375,-80.009353&size=" + this.width + "x" + this.height + "&fov=" + fov + "&heading=" + this.heading + "&pitch=" + this.pitch;
}

PanoramaViewer.prototype.update = function() {
  var element = this.element;

  element.style.backgroundImage = "url(" + this.makeUrl() + ")";

  var width = this.width;
  var height = this.height;

  var context = element.getContext('2d');

  context.strokeStyle = '#FFFF00';

  context.beginPath();
  context.moveTo(0, height / 2);
  context.lineTo(width, height / 2);
  context.stroke();

  context.beginPath();
  context.moveTo(width / 2, 0);
  context.lineTo(width / 2, height);
  context.stroke();
}

function sgn(x) {
  return x >= 0 ? 1 : -1;
}

PanoramaViewer.prototype.unmap = function(heading, pitch) {
  var PI = Math.PI
  var cos = Math.cos;
  var sin = Math.sin;
  var tan = Math.tan;

  var fov = PanoramaViewer.FOV * PI / 180.0;
  var width = this.width;
  var height = this.height;

  var f = 0.5 * width / tan(0.5 * fov);

  var h = heading * PI / 180.0;
  var p = pitch * PI / 180.0;

  var x = f * cos(p) * sin(h);
  var y = f * cos(p) * cos(h);
  var z = f * sin(p);

  var h0 = this.heading * PI / 180.0;
  var p0 = this.pitch * PI / 180.0;

  var x0 = f * cos(p0) * sin(h0);
  var y0 = f * cos(p0) * cos(h0);
  var z0 = f * sin(p0);

  //
  // Intersect the ray O, v = (x, y, z)
  // with the plane at M0 of normal n = (x0, y0, z0)
  //
  //   n . (O + t v - M0) = 0
  //   t n . v = n . M0 = f^2
  //
  var t = f * f / (x0 * x + y0 * y + z0 * z);

  var ux = sgn(cos(p0)) * cos(h0);
  var uy = -sgn(cos(p0)) * sin(h0);
  var uz = 0;

  var vx = -sin(p0) * sin(h0);
  var vy = -sin(p0) * cos(h0);
  var vz = cos(p0);

  var x1 = t * x;
  var y1 = t * y;
  var z1 = t * z;

  var dx10 = x1 - x0;
  var dy10 = y1 - y0;
  var dz10 = z1 - z0;

  // Project on the local basis (u, v) at M0
  var du = ux * dx10 + uy * dy10 + uz * dz10;
  var dv = vx * dx10 + vy * dy10 + vz * dz10;

  return {
    u: du + width / 2,
    v: height / 2 - dv,
  };
}

PanoramaViewer.prototype.map = function(u, v) {
  var PI = Math.PI;
  var cos = Math.cos;
  var sin = Math.sin;
  var tan = Math.tan;
  var sqrt = Math.sqrt;
  var atan2 = Math.atan2;
  var asin = Math.asin;

  var fov = PanoramaViewer.FOV * PI / 180.0;
  var width = this.width;
  var height = this.height;

  var h0 = this.heading * PI / 180.0;
  var p0 = this.pitch * PI / 180.0;

  var f = 0.5 * width / tan(0.5 * fov);

  var x0 = f * cos(p0) * sin(h0);
  var y0 = f * cos(p0) * cos(h0);
  var z0 = f * sin(p0);

  var du = u - width / 2;
  var dv = height / 2 - v;

  var ux = sgn(cos(p0)) * cos(h0);
  var uy = -sgn(cos(p0)) * sin(h0);
  var uz = 0;

  var vx = -sin(p0) * sin(h0);
  var vy = -sin(p0) * cos(h0);
  var vz = cos(p0);

  var x = x0 + du * ux + dv * vx;
  var y = y0 + du * uy + dv * vy;
  var z = z0 + du * uz + dv * vz;

  var R = sqrt(x * x + y * y + z * z);
  var h = atan2(x, y);
  var p = asin(z / R);

  return {
    heading: h * 180.0 / PI,
    pitch: p * 180.0 / PI
  };
}

PanoramaViewer.prototype.click = function(e) {
  var rect = e.target.getBoundingClientRect();
  var u = e.clientX - rect.left;
  var v = e.clientY - rect.top;

  var uvCoords = this.unmap(this.heading, this.pitch);

  console.log("current viewport center");
  console.log("  heading: " + this.heading);
  console.log("  pitch: " + this.pitch);
  console.log("  u: " + uvCoords.u)
  console.log("  v: " + uvCoords.v);

  var hpCoords = this.map(u, v);
  uvCoords = this.unmap(hpCoords.heading, hpCoords.pitch);

  console.log("click at (" + u + "," + v + ")");
  console.log("  heading: " + hpCoords.heading);
  console.log("  pitch: " + hpCoords.pitch);
  console.log("  u: " + uvCoords.u);
  console.log("  v: " + uvCoords.v);

  this.heading = hpCoords.heading;
  this.pitch = hpCoords.pitch;
  this.update();
}

关于javascript - 从街景中的像素获取航向和俯仰，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21591462/