标签:ima epo function getc cat pow ott class clock
先贴下关键代码和效果图,后续再完善解说:
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地图上的图片的移动、旋转和缩放(保持长宽比)
标签:ima epo function getc cat pow ott class clock
原文地址:https://www.cnblogs.com/davidxu/p/10362996.html