旋转传单折线/矩形

Posted 2023-03-23

【中文标题】旋转传单折线/矩形

【英文标题】：Rotate leaflet Polyline/Rectangle

【发布时间】：2020-06-22 04:55:39

【问题描述】：

我正在尝试使用 question 中的代码旋转 Leaflet Rectangle。

rotatePoints (center, points, yaw) 
  const res = []
  const angle = yaw * (Math.PI / 180)
  for (let i = 0; i < points.length; i++) 
  const p = points[i]
  // translate to center
  const p2 = new LatLng(p.lat - center.lat, p.lng - center.lng)
  // rotate using matrix rotation
  const p3 = new LatLng(Math.cos(angle) * p2.lat - Math.sin(angle) * p2.lng, Math.sin(angle) * p2.lat + Math.cos(angle) * p2.lng)
  // translate back to center
  const p4 = new LatLng(p3.lat + center.lat, p3.lng + center.lng)
  // done with that point
  res.push(p4)

return res

问题是矩形在旋转时倾斜。 任何想法如何优化此功能？

已修复 最终代码：

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

【参考方案1】：

什么是球体上的“矩形”？这是将当前投影应用于这样的坐标的结果，它们在地图/屏幕上的图像形成矩形。请注意，每个矩形边的经纬度坐标不应该相等（例如，赤道对齐矩形的经度在大多数常用投影中的顶部和底部点会有所不同）

所以要在地图中得到好看的矩形，你需要在屏幕坐标系中旋转顶点，并进行反投影到经纬度空间。