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

时间:2020-11-23 18:01:53

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

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 }

实现效果:

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