Quantcast
Channel: rotate polygon around point in leaflet map - Stack Overflow
Viewing all articles
Browse latest Browse all 4

Answer by dooderson for rotate polygon around point in leaflet map

$
0
0

One way to do it is through matrix rotation. https://en.wikipedia.org/wiki/Rotation_matrix.You want to translate the point to the center then apply the rotation, then translate it back.

This is what the end of your code would look like.

  //changing polyline with slider but I want to change polygon there  range_yaw.onchange = function() {    var yawAngle = (parseFloat(range_yaw.value) / (819 / 360) + 90)    // line    var center = [decimal_lat, decimal_lon]    var end = [decimal_lat + 2, decimal_lon + 2]    var pointListRotated = rotatePoints(center, [center, end], yawAngle)    polyline.setLatLngs(pointListRotated);    // polygon    var polygonPoints = [      center,      [center[0] + 1, center[1] - 1],      [center[0] + 1, center[1] + 1]    ]    polygonRotated = rotatePoints(center, polygonPoints, yawAngle)    polygon.setLatLngs(polygonRotated)  };  //  // rotate a list of points in [lat, lng] format about the center.  //  function rotatePoints(center, points, yaw) {    var res = []    var angle = yaw * (Math.PI / 180)    for(var i=0; i<points.length; i++) {      var p = points[i]      // translate to center      var p2 = [ p[0]-center[0], p[1]-center[1] ]      // rotate using matrix rotation      var p3 = [ Math.cos(angle)*p2[0] - Math.sin(angle)*p2[1], Math.sin(angle)*p2[0] + Math.cos(angle)*p2[1]]      // translate back to center      var p4 = [ p3[0]+center[0], p3[1]+center[1]]      // done with that point      res.push(p4)    }    return res  }

Here is a DEMO


Viewing all articles
Browse latest Browse all 4

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>