React + Leaflet：如何围绕 (i) 其中心和 (ii) 其一个角旋转一组标记和矩形向量 Working codesandbox

如何解决React + Leaflet：如何围绕 (i) 其中心和 (ii) 其一个角旋转一组标记和矩形向量 Working codesandbox

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

https://codesandbox.io/s/react-leaflet-grid-with-markers-ds9yl?file=/src/index.js

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

能够在生成网格时应用变换是一个很大的好处，但将变换应用到显示的网格也是一个很好的开始。

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

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

解决方法

好的，我的朋友。这并非微不足道。但是很有趣。

Working codesandbox

传单没有内置任何内容来实现这一点。我非常喜欢 leaflet-geometryutil 在传单中进行 GIS 计算和转换。虽然 leaflet-path-transoform 存在，但我发现它的范围太窄，无法满足您的需求。相反，让我们自己发明轮子。

解决这个问题的最简单的方法是获取所涉及的每个坐标，并围绕给定的经纬度旋转它。这可以通过 Leaflet-geometryutil 的 rotatePoint 函数来完成。请注意，那里的文档不是 100% 正确的 - 它需要 4 个参数，第一个是地图实例。因此，我必须通过使用引用标记 ref 组件来获取地图的 <Map>。

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

  const rotatePoint = React.useCallback(
    (point) => {
      const { lat,lng } = L.GeometryUtil.rotatePoint(
        mapRef.current.leafletElement,L.latLng(point[0],point[1]),transformation.degrees,L.latLng(axis[0],axis[1])
      );
      return [lat,lng];
    },[mapRef,transformation,axis]
  );

axis 参数是我们要使用的旋转原点。 transoformation.degrees 只是来自用户输入的数字，用于获取您想要旋转的度数。我不确定您打算如何实现此功能（UI 与编程方式），但此功能可让您随心所欲地旋转。

创建地图后，我们会使用您的 gridBottomLeft 和 gridSize，并计算一个 初始 网格，称为 baseGrid，并将其保存到状态。实际上这不需要是一个状态变量，因为我们不希望它改变，除非 gridBottomLeft 或 gridSize 改变，在这种情况下组件无论如何都会重新渲染。但是我将它保留为状态变量只是为了保持与您相同的逻辑。 也将其保留为状态变量可能是有意义的，因为如您所见，当您在不同的旋转原点之间切换时，事情可能不会如您所愿，并且您可能想要重置 {{ 1}} 当您切换旋转原点时。

我们为网格的当前状态保留一个 单独 状态变量，baseGrid，它是 grid 的变体。当用户更改度数输入时，会触发 useEffect，它根据度数创建 baseGrid 的转换，并将其设置为 baseGrid 状态变量：

grid

如您所见，我所做的是将我们的旋转变换函数应用于正方形中的所有点（重命名为 useEffect(() => { const rotatedGrid = baseGrid.map((square) => { return { id: square.id,positions: square.positions.map((coord) => { return rotatePoint(coord); }),center: rotatePoint(square.position) }; }); setGrid(rotatedGrid); },[transformation.degrees,bottomLeft,rotatePoint,baseGrid]); ），以及标记的位置（重命名为 positions）。

瞧，整个网格及其标记都围绕您定义的轴点旋转。

**注意，您使用的是 center 组件，以 2 个点作为边界来定义矩形。当您旋转矩形时，这不再起作用，因此我将其转换为 Rectangle，将正方形的 4 个角作为其 Polygon 属性。

另请注意，此在 react-leaflet 版本 3 中将不起作用。v3 具有绝对大量的重大更改（IMO 极大地提高了库），但是引用和更改道具的管理是完全不同的，因此需要在 v3 中考虑。如果您对此有任何疑问，请发表评论，我可以再写一点，但这个答案已经很长了。