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

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

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 }

实现效果:

技术图片

 

相关文章