問題描述

我有一個問題，在我的傳單地圖中，我從多邊形創建了一個三角形:

I have an issue, in my leaflet map I've created a triangle from polygon:

var polygon = L.polygon([ 
    [parseFloat(decimal_lat),parseFloat(decimal_lon)], 
    [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) - 1], 
    [parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) + 1] ],       
    {
            color:'green'
    });
polygon.addTo(map);

我想圍繞 Point[decimal_lon, decimal_lat] 旋轉這個多邊形.但我無法解決它..
我創建了 DEMO，我正在旋轉多項式，我想旋轉我的三角形(多邊形)向您展示我的問題.

and I want to rotate this polygon around Point[decimal_lon, decimal_lat]. But I'm not able to solve it..
I've created DEMO, where I'm rotating polynom the same I want to rotate my triangle (polygon) to show you my problem.

推薦答案

一種方法是通過矩陣旋轉.https://en.wikipedia.org/wiki/Rotation_matrix.您想將該點平移到中心，然后應用旋轉，然后將其平移回來.

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
  }

這是一個演示

這篇關于圍繞傳單地圖中的點旋轉多邊形的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！