Reactjs 反应+；传单：如何围绕（i）其中心和（ii）其一个角旋转一组标记和矩形向量

我已经创建了一个非常简单的传单地图，将一系列标记显示为一个正方形，我想围绕其中心或相对于其左下角顶点旋转任意角度（这也是其原点和位置[0][0]）

我不希望旋转单个标记（有插件），但整个网格应该保持其形状，所有相对标记间距保持不变，但整个地图通过任何角度旋转。作为一种额外的复杂性，每个标记都在网格单元中渲染，网格单元只是一个传单矩形，但也需要保持其相对于相邻单元的位置

在生成网格时能够应用变换将是一个巨大的奖励，但是将变换应用到所示的网格也是一个很好的开始

传单已经提供了路径变换，但我需要变换整个标记数组及其路径表示。这看起来像一道几何/数学题，但我希望传单上已经涵盖了这道题

---

非常感谢任何帮助或建议。

好的，我的朋友。这不是小事。但这很有趣

传单中没有任何东西可以让这一切发生。我非常喜欢在传单中进行GIS计算和转换。虽然存在，但我发现它的范围太窄，无法满足您的需要。相反，让我们发明我们自己的轮子

实现这一点最简单的方法是获取所有涉及的坐标，并围绕给定的坐标旋转。这可以通过传单geometryutil的功能实现。注意那里的文档不是100%正确的-它需要4个参数，第一个是map实例。因此，我必须通过在

组件上标记一个ref来获得地图的

ref

我在那里添加了一些UI，这样您就可以手动更改角度，并将旋转点从网格中心切换到左下角。这一部分有点琐碎，您可以在沙箱中查看代码。最关键的部分是能够围绕旋转点旋转网格中涉及的每个点（正方形和标记）。此函数的作用是：

const rotatePoint=React.useCallback(
（点）=>{
常数{lat，lng}=L.GeometryUtil.rotatePoint(
mapRef.current.Element，
L.latLng（点[0]，点[1]），
3.0度，
L.latLng（轴[0]，轴[1]）
);
返回[拉丁美洲，液化天然气]；
},
[mapRef，变换，轴]
);

轴

参数是我们要使用的旋转原点

transoformation.degrees

只是从用户输入中获取要旋转的度数的数字。我不知道你打算如何实现它（UI与编程），但是这个函数可以让你随心所欲地旋转

创建地图时，我们使用

gridBottomLeft

和

gridSize

，计算一个名为

baseGrid

的初始网格，并将其保存到state。实际上，这不需要是一个状态变量，因为我们不希望它改变，除非

gridBottomLeft

或

gridSize

改变，在这种情况下，组件无论如何都会重新加载。然而，我把它作为一个状态变量保存，只是为了保持与您相同的逻辑。将其保留为状态变量也是有意义的，因为正如您所看到的，当您在不同的旋转原点之间切换时，事情可能不会如您所期望的那样进行，并且您可能希望在切换旋转原点时重置

baseGrid

我们为网格的当前状态保留一个单独的状态变量，

grid

，它是

baseGrid

的变体。当用户更改学位输入时，将触发useEffect，它基于学位编号创建

baseGrid

的转换，并将其设置为

grid

状态变量：

useffect（（）=>{
const rotatedGrid=baseGrid.map（（正方形）=>{
返回{
id:square.id，
位置：square.positions.map（（坐标）=>{
返回旋转点（坐标）；
}),
中心：旋转点（方形位置）
};
});
设置网格（旋转网格）；
}，[transformation.degrees，bottomLeft，rotatePoint，baseGrid]）；

如您所见，我所做的是将旋转变换函数应用于正方形中的所有点（重命名为

位置

），以及标记的位置（重命名为

中心

）

而voila，整个网格将围绕定义的轴点旋转，并与其标记一起旋转

**请注意，您使用的是

矩形

组件，以2个点作为边界来定义矩形。当您旋转矩形时，这不再有效，因此我将其转换为

多边形

，正方形的4个角作为其

位置

道具

---

另请注意，此在react手册第3版中不起作用。v3有大量突破性的更改（IMO已经极大地提高了库的性能和用户体验），但是REF和更改道具的管理是完全不同的，因此，需要在v3中进行说明。如果您对此有疑问，请发表评论，我可以再多写一点，但这个答案已经很长了。

我不知道，但我觉得您的问题太酷了！我会尝试一些css转换的东西，正如在《感谢》中所解释的，这肯定是一个很大的问题。css转换的问题是它无法映射lat/lng位置，而这些位置都需要相对于旋转进行更改。这是一个非常有趣的问题。我相当肯定传单中并没有为你们做这件事，但这应该不会太难做到。在我花太多时间之前，我看到你正在使用react传单v2。你是受不了了，还是