改造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