javascript - 使用旋转/缩放/平移在 Google map 上定位图像

Question

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

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

我尝试添加一个旋转工具，但它没有像我预期的那样工作:

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

我的代码基于 mover 对象，但我更改了 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;
};

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

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

经过几次旋转后，图像严重变形，并且仅支持在一个方向上旋转。

我想知道我如何才能达到很高的精度并且没有任何失真。

也许我的方法在这里没用(尝试在正确的坐标移动 Angular )，我尝试用 Canvas 旋转图像但我的尝试没有成功。

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

Answer 1

这是我的版本。 @efux 和@Ben 的答案更加完整且设计精良，但是当您放大/缩小时， map 不会放大/缩小。叠加层很可能需要执行此操作，因为它们用于在现有 map 上放置“第二张 map ”或照片。

这是 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 代码上实现，但我还没有尝试过。

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