1

我有一个问题，在我的传单地图中，我从多边形创建了一个三角形：

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，我正在旋转多项式，我想旋转我的三角形（多边形）来向你展示我的问题。

4

3 回答 3

5

一种方法是通过矩阵旋转。https://en.wikipedia.org/wiki/Rotation_matrix。您想将该点平移到中心，然后应用旋转，然后将其平移回来。

这就是代码结尾的样子。

  //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
  }

这是一个演示

于 2016-02-17T00:27:37.930 回答
3

我从这个问题的答案中改编了@dooderson 和@MBo ，最终的代码是这样的，它工作得很好！

rotatePoints (center, points, yaw) {
  const res = []
  const centerPoint = map.latLngToLayerPoint(center)
  const angle = yaw * (Math.PI / 180)
  for (let i = 0; i < points.length; i++) {
    const p = map.latLngToLayerPoint(points[i])
    // translate to center
    const p2 = new Point(p.x - centerPoint.x, p.y - centerPoint.y)
    // rotate using matrix rotation
    const p3 = new Point(Math.cos(angle) * p2.x - Math.sin(angle) * p2.y, Math.sin(angle) * p2.x + Math.cos(angle) * p2.y)
    // translate back to center
    let p4 = new Point(p3.x + centerPoint.x, p3.y + centerPoint.y)
    // done with that point
    p4 = map.layerPointToLatLng(p4)
    res.push(p4)
}
return res
}
于 2020-03-10T12:09:01.913 回答
1

你可以通过几种方式来处理它。这是一个...

首先：计算从锚点到两个“外”点的方位和距离。这里有几个辅助函数： https ://github.com/gregallensworth/Leaflet/blob/master/LatLng_Bearings.js

第二：根据需要调整这些轴承...保持原始距离。

第三：使用新的方位角和距离，使用此处接受的答案计算新的 LatLngs： 如何计算距另一个点一定距离的点的 latlng？ （这使用谷歌地图而不是传单，但它很容易移植到传单）

如果您在执行过程中遇到任何问题，请告诉我...

于 2016-02-17T03:37:21.293 回答