使用旋转/缩放/翻译在 Google 地图上定位图像

Question

我正在开发一个用于在谷歌地图上定位图像的用户界面。 我从：http://overlay-tiler.googlecode.com/svn/trunk/upload.html 开始，这与我想要的非常接近。

但我想要一个旋转工具、一个缩放工具和一个平移工具（后者存在），而不是 3 个接触点。

我尝试添加一个旋转工具，但它没有按预期工作：

我在左下角放了一个点来控制旋转（围绕图像的中心）。鼠标拖动控制点，我计算其他 3 个点。

我的代码基于移动器对象，但我更改了 onMouseMove 函数：

overlaytiler.Rotater.prototype.rotateDot_ = function(dot, theta, origin) {
  dot.x = ((dot.x - origin.x) * Math.cos(theta) - (dot.y - origin.y) * Math.sin(theta)) + origin.x;
  dot.y = ((dot.x - origin.x) * Math.sin(theta) + (dot.y - origin.y) * Math.cos(theta)) + origin.y;
  dot.render();
};

overlaytiler.Rotater.prototype.onMouseMove_ = function(e) {
  var dots = this.controlDots_;
  var center = overlaytiler.Rotater.prototype.getCenter_(dots);

  // Diagonal length
  var r = Math.sqrt(Math.pow(this.x - center.x, 2) + Math.pow(this.y - center.y, 2));
  var old = {
    x: this.x,
    y: this.y
  };

  // Real position
  var newPos = {
    x: this.x + e.clientX - this.cx,
    y: this.y + e.clientY - this.cy
  }

  var newR = Math.sqrt(Math.pow(newPos.x - center.x, 2) + Math.pow(newPos.y - center.y, 2));
  var theta = - Math.acos((2 * r * r - (Math.pow(newPos.x - old.x, 2) + Math.pow(newPos.y - old.y, 2))) / (2 * r * r));

  // Fixed distance position
  this.x = (newPos.x - center.x) * (r / newR) + center.x;
  this.y = (newPos.y - center.y) * (r / newR) + center.y;

  dots[1].x = center.x + (center.x - this.x);
  dots[1].y = center.y + (center.y - this.y);
  dots[1].render();

  overlaytiler.Rotater.prototype.rotateDot_(dots[2], theta, center);
  overlaytiler.Rotater.prototype.rotateDot_(dots[0], theta, center);

  // Render
  this.render();

  this.cx = e.clientX;
  this.cy = e.clientY;
};

不幸的是，精度和角度符号存在问题。

http://jsbin.com/iQEbIzo/4/

经过几次旋转后，图像高度失真，仅支持一个方向的旋转。

我想知道如何才能实现高精度且不失真。

也许我的方法在这里没用（尝试将角移动到正确的坐标），我尝试使用画布旋转图像但我的尝试不成功。

编辑：完整工作版：http://jsbin.com/iQEbIzo/7/

Answer 1

这是我的版本。 @efux 和 @Ben 的答案更加完整且设计精良，但是当您放大/缩小时，地图不会按比例放大/缩小。覆盖很可能需要这样做，因为它们用于在现有地图上放置“第二张地图”或照片。

这里是 JSFiddle：http://jsfiddle.net/adelriosantiago/3tzzwmsx/4/

绘制的代码如下：

DebugOverlay.prototype.draw = function() {
                var overlayProjection = this.getProjection();
                var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
                var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
    div.style.transform = 'rotate(' + rot + 'deg)';
};

如果需要，可以肯定此代码可以在 efux 和 Ben 代码上实现，但我还没有尝试过。

请注意，当旋转标记移动时，框标记不会更新其位置...

Answer 2

仅支持单向旋转

这是由于您如何计算两个向量之间的角度。 不管鼠标是否在点的右边，它总是给你相同的向量。我在german math board 中找到了解决方案（不幸的是，如果不使用 Google 的缓存，我无法访问该网站：cached version）。

请注意，在此示例中，角度 α 在两侧是相同的，而不是您所期望的第二个中的 -α。要确定向量 a 是否始终在向量 b 的“同一侧”，您可以使用此公式。

ax*by - ay*bx

这是正面的或负面的。您只需将角度的符号更改为α * -1。

我修改了你的部分代码。

overlaytiler.Rotater.prototype.rotateDot_ = function(dot, theta, origin) {
    // translate to origin
    dot.x -= origin.x ;
    dot.y -= origin.y ;

    // perform rotation
    newPos = {
         x: dot.x*Math.cos(theta) - dot.y*Math.sin(theta),
         y: dot.x*Math.sin(theta) + dot.y*Math.cos(theta)
    } ;
    dot.x = newPos.x ;
    dot.y = newPos.y ;

    // translate back to center
    dot.x += origin.x ;
    dot.y += origin.y ;

    dot.render();
};

如果你想知道我是如何旋转点的，请参考this site和this one。

overlaytiler.Rotater.prototype.onMouseMove_ = function(e) {                                                 
    var dots = this.controlDots_;                                                                           
     var center = overlaytiler.Rotater.prototype.getCenter_(dots);                                           

     // get the location of the canvas relative to the screen                                                                                                        
     var rect = new Array() ;
     rect[0] = dots[0].canvas_.getBoundingClientRect() ;
     rect[1] = dots[1].canvas_.getBoundingClientRect() ;
     rect[2] = dots[2].canvas_.getBoundingClientRect() ;

     // calculate the relative center of the image
     var relCenter =  {
         x: (rect[0].left + rect[2].left) / 2,
         y: (rect[0].top + rect[2].top) / 2
     } ;

     // calculate a vector from the center to the bottom left of the image
     dotCorner = {
         x: rect[1].left - (rect[1].left - relCenter.x) * 2 - relCenter.x,
         y: rect[1].top - (rect[1].top - relCenter.y) * 2 - relCenter.y
     } ;                                                                                                   

     // calculate a vector from the center to the mouse position                                             
     mousePos = {                                                                                            
          x: e.clientX - relCenter.x,                                                                           
          y: e.clientY - relCenter.y                                                                            
     } ;                                                                                                      

     // calculate the angle between the two vector                                                           
     theta = calculateAngle(dotCorner, mousePos) ;                                                           

     // is the mouse-vector left of the dot-vector -> refer to the german math board                                                           
     if(dotCorner.y*mousePos.x - dotCorner.x*mousePos.y > 0) {                                               
          theta *= -1 ;                                                                                      
     }                                                                                                       

     // calculate new position of the dots and render them                                                   
     overlaytiler.Rotater.prototype.rotateDot_(dots[2], theta, center);                                      
     overlaytiler.Rotater.prototype.rotateDot_(dots[1], theta, center);                                      
     overlaytiler.Rotater.prototype.rotateDot_(dots[0], theta, center);                                      

     // Render                                                                                               
     this.render();                                                                                          

     this.cx = e.clientX;                                                                                    
     this.cy = e.clientY;                                                                                    
 };

你可以看到我写了一些向量计算的函数（只是为了让代码更具可读性）：

function calculateScalarProduct(v1,v2)
{
    return (v1.x * v2.x + v1.y * v2.y) ;
}

function calculateLength(v1)
{
    return (Math.sqrt(v1.x*v1.x + v1.y*v1.y)) ;
}

function calculateAngle(v1, v2)
{
    return (Math.acos(calculateScalarProduct(v1,v2) / (calculateLength(v1)*calculateLength(v2)))) ;
}

这是我的工作解决方案。有不明白的地方可以评论，让我的回答更全面。

工作示例：JSBin

哇，这太难了。