改造leaflet图片插件Leaflet.ImageOverlay.Rotated，通过图片矩形对角线上的2个顶点控制图片的移动、旋转和缩放，并且保持图片长宽比不变，图片不变形。

简介：公司需要做个地图图片编辑功能，将平面图上传到Mapbox地图上，可拖拽、旋转、缩放图片至合适的地理位置上。当时发现MapboxGL不好弄，改成了leaflet地图，leaflet插件很多，找到https://github.com/IvanSanchez/Leaflet.ImageOverlay.Rotated图片编辑插件，但发现操作无法保证图片不变形，所以做了些改造，这里顺便做个笔记以便日后查阅。

1、Leaflet.ImageOverlay.Rotated插件原理分析：

添加图片要传入3个顶点坐标，topleft, topright, bottomleft，也是可以拖拽的三个控制点。

var overlay = L.imageOverlay.rotated(imgUrl, topLeftPoint, topRightPoint, bottomLeftPoint, {
        opacity: 0.9,
        interactive: true,
        corners:[],
        w: null,
        h: null
    });

图片添加到地图上，会生成一个外接矩形框（默认是看不到的，我加了border使其可见，便于分析），然后你拖拽3个顶点marker， 插件内部通过数学计算会推断第四个顶点的位置，然后根据4个顶点的位置显示图片。

                         图（1）

 每次拖拽都会调用reposition方法重设图片位置。 

reposition: function(topleft, topright, bottomleft) {
        this._topLeft    = L.latLng(topleft);
        this._topRight   = L.latLng(topright);
        this._bottomLeft = L.latLng(bottomleft);
        this._reset();
    },

 重点逻辑在_reset方法中， 每次reset都会根据3个顶点推断第四个顶点，然后计算外接矩形框。

_reset: function () {
    var div = this._image;

    // Project control points to container-pixel coordinates
    // 1)先将3个顶点经纬度转成平面坐标
    var pxTopLeft    = this._map.latLngToLayerPoint(this._topLeft);
    var pxTopRight   = this._map.latLngToLayerPoint(this._topRight);
    var pxBottomLeft = this._map.latLngToLayerPoint(this._bottomLeft);

    // Infer coordinate of bottom right
    // 2)然后第4个顶点坐标右下=右上-左上+左下
    var pxBottomRight = pxTopRight.subtract(pxTopLeft).add(pxBottomLeft);

    // pxBounds is mostly for positioning the <div> container
    // 3）计算4个顶点的外接矩形，返回的pxBounds由四个顶点中的x、y最值构成，即max和min两个顶点对象
    var pxBounds = L.bounds([pxTopLeft, pxTopRight, pxBottomLeft, pxBottomRight]);

    //size是外接矩形的宽高，宽=max.x - min.x, 高=max.y - min.y
    var size = pxBounds.getSize();

    //用topLeft减去外接矩形最小顶点坐标得到topLeft相对于该外接矩形的坐标位置
    var pxTopLeftInDiv = pxTopLeft.subtract(pxBounds.min);

    // Calculate the skew angles, both in X and Y
    //4）计算斜切角，这里用到了css3的skew样式，可改变dom结点的倾斜程度，如下图(2)
    var vectorX = pxTopRight.subtract(pxTopLeft);
    var vectorY = pxBottomLeft.subtract(pxTopLeft);
    var skewX = Math.atan2( vectorX.y, vectorX.x );
    var skewY = Math.atan2( vectorY.x, vectorY.y );

    // LatLngBounds used for animations
    this._bounds = L.latLngBounds( this._map.layerPointToLatLng(pxBounds.min),
                                   this._map.layerPointToLatLng(pxBounds.max) );

    L.DomUtil.setPosition(div, pxBounds.min);

    div.style.width  = size.x + 'px';
    div.style.height = size.y + 'px';

    var imgW = this._rawImage.width;
    var imgH = this._rawImage.height;
    if (!imgW || !imgH) {
        return;    // Probably because the image hasn't loaded yet.
    }

    //5)计算图片的缩放比例
    var scaleX = pxTopLeft.distanceTo(pxTopRight)   / imgW * Math.cos(skewX);
    var scaleY = pxTopLeft.distanceTo(pxBottomLeft) / imgH * Math.cos(skewY);

    this._rawImage.style.transformOrigin = '0 0';

    this._rawImage.style.transform =
        'translate(' + pxTopLeftInDiv.x + 'px, ' + pxTopLeftInDiv.y + 'px)' +
        'skew(' + skewY + 'rad, ' + skewX + 'rad) ' +
        'scale(' + scaleX + ', ' + scaleY + ') ';
},

                          图（2）

 由于图片完全由3个顶点的位置控制而没有约束，所以图片会出现长宽不等、邻边夹角变化导致的图片变形，因此要改造。

 2、如何改造，实现图片不变形，即保证图片是矩形且长宽比不变，如下图所示：

  

 

                                  图（3）

图片ABCD是第一次初始化位置，A和C是2个可拖拽的顶点，每次拖拽只要保证B、D两个顶点是唯一确定的就能能保证图片不变形。

向量AB在向量AC上的投影c的长度与向量AC的长度比值是常数，即 k1 = |c| / |AC|， k1是固定不变的。证明如下：

|c| / |AC| = 向量AB · 向量AC /  (向量AC * 向量AC) = |AB|*|AC| *cosα/ |AC|^2 = |AB|/ |AC| * cosα = cosα ^2， 因为对固定长宽比例且不变形的矩形图片角α是不变的，所以|c| / |AC| =  k是常数。

同理将向量AC逆时针旋转90度得到向量AU，向量AB在向量AU上的投影b的长度与向量AU的长度比值也是常数，即k2 = |b| / |AU|， k2是固定不变的。

我们发现向量AB=向量b+向量c， 因此我们每次只需要计算出b,c两个向量就可以唯一确定向量AB，进而确定了顶点B的位置。

同理，其它的顶点也这样计算。

计算用到了余弦定理、平面向量数学知识，关键代码贴下：

1）向量的数量积计算：

 function getDotProduction(point1, point2){
      return point1.x * point2.x + point1.y * point2.y;
 }

2）向量顺时针旋转90度：

 function getClockWiseRotate90DegreePoint(point){
        return L.point([point.y, -point.x]);
    }

3）计算新顶点的位置：

 function getCornerLatLng(point, bottomLeftMarkerLatLng, topRightMarkerLatLng){
        var boundsRectBottomLeft= L.point(0, 0);// origin
        var boundsRectTopRight= L.point(imgWidth, imgHeight);
        var diagonalVector = boundsRectTopRight.subtract(boundsRectBottomLeft); 
        var pV = point.subtract(boundsRectBottomLeft); 
        var rotate90V = getClockWiseRotate90DegreePoint(diagonalVector);
        var scaleX = getDotProduction(diagonalVector, pV) / getDotProduction(diagonalVector, diagonalVector);
        var scaleY = -getDotProduction(rotate90V, pV) / getDotProduction(rotate90V, rotate90V);
        var bLMarkerPx = L.Projection.SphericalMercator.project(bottomLeftMarkerLatLng);
        var tRMarkerPx = L.Projection.SphericalMercator.project(topRightMarkerLatLng);
        var vx = bLMarkerPx.add(tRMarkerPx.subtract(bLMarkerPx).multiplyBy(scaleX));
        var vy = getClockWiseRotate90DegreePoint(bLMarkerPx.subtract(tRMarkerPx)).multiplyBy(scaleY);
        var p = vx.add(vy);
        return L.Projection.SphericalMercator.unproject(p);
    }

4）拖拽事件及reset方法：topRightMarker.on('drag dragend', repositionImage)；

bottomLeftMarker.on('drag dragend', repositionImage)；

function repositionImage() {
        var tRlnglat = topRightMarker.getLatLng();
        var bLlnglat = bottomLeftMarker.getLatLng();
        var imgWidth = overlay.options.w;
        var imgHeight = overlay.options.h;
        
        var c1 = getCornerLatLng(L.point(0, imgHeight), bLlnglat, tRlnglat);  // raw image topleft
        var c2 = getCornerLatLng(L.point(imgWidth, imgHeight), bLlnglat, tRlnglat);  // raw image topright
        var c3 = getCornerLatLng(L.point(0, 0), bLlnglat, tRlnglat);  // raw image bottomLeft
        var c4 = getCornerLatLng(L.point(imgWidth, 0), bLlnglat, tRlnglat);

        overlay.options.corners = [c1, c2, c3, c4];
        
        overlay.reposition(c1, c2, c3);   
    }

实现效果：

项目地址：https://github.com/wxzen/Leaflet.ImageOverlay.Rotated-by-Two-Markers