码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-07-06 09:23:33      阅读:631      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!