通过矩形的2个顶点实现leaflet地图上的图片的移动旋转和缩放（保持长宽比）

Posted 2022-03-19 davidxu

先贴下关键代码和效果图，后续再完善解说：

1 /**
2   *坐标顺时针旋转90°
3   */
4 function getClockWiseRotate90DegreePoint(point)
5    return L.point([point.y, -point.x]);
6 

1 /**
2  * 获取向量的模
3  */
4 function getMagnitude(point)
5    return Math.sqrt(getDotProduction(point, point));
6 

1 /**
2   * 计算2个向量的内积
3   */
4 function getDotProduction(point1, point2)
5    return point1.x * point2.x + point1.y * point2.y;
6 

 1 /**
 2   * 获取矩形顶点新的坐标
 3  */
 4 function getNewLatlng(point, bottomLeftMarkerPoint, bottomLeftMarkerLatLng,
 5     topRightMarkerPoint, topRightMarkerLatLng)
 6    var r = topRightMarkerPoint.subtract(bottomLeftMarkerPoint),
 7        i = point.subtract(bottomLeftMarkerPoint),
 8        s = getClockWiseRotate90DegreePoint(r),
 9        l = getDotProduction(r, i) / Math.pow(getMagnitude(r), 2),
10        c = -getDotProduction(s, i) / Math.pow(getMagnitude(s), 2),
11        bLMarkerPx = L.Projection.SphericalMercator.project(bottomLeftMarkerLatLng),
12        tRMarkerPx = L.Projection.SphericalMercator.project(topRightMarkerLatLng),
13        p = bLMarkerPx.add(tRMarkerPx.subtract(bLMarkerPx).multiplyBy(l))
14            .add(getClockWiseRotate90DegreePoint(bLMarkerPx.subtract(tRMarkerPx)).multiplyBy(c));
15    return L.Projection.SphericalMercator.unproject(p);
16 

实现效果：