Openlayers React 旋转多边形功能

Question

我这里有一个简单的 react/openlayers(https://jsfiddle.net/mcneela86/Lx44yc3m/)，我已经设置它来演示我的问题。

我有一个简单的地图，目前可以使用。
一个允许用户绘制当前可用的多边形的工具。
允许用户移动当前工作的多边形的工具。
一个允许用户旋转多边形的工具，目前无法使用 - 这是我需要帮助的地方，并且包含了其他工具，以防他们帮助任何人了解我的应用程序是如何工作的。

在我的示例应用程序中，如果您绘制一个多边形，select 旋转工具并单击您绘制的多边形，它会将多边形旋转 20 度 - 所以我知道有一个旋转功能。我希望用户单击并拖动或单击并显示要拖动的手柄，以便他们可以很好地控制旋转。

feature.element.getGeometry().rotate(0.349066, c); 目前正在进行轮换。

所以我不知道如何接受用户输入，比方说 mousedown，检测到他们正在移动鼠标并使用 rotate() 函数中的值来更改多边形的旋转？

如有任何帮助，我们将不胜感激。

编辑：

这里是关于多边形边界 box/handles 的意思的示例：

Answer 1

悬停时显示句柄，用指针事件检测：

  map.on('pointermove', (evt) => {
    if (evt.dragging) {
      return;
    }
    const pixel = this.map.getEventPixel(evt.originalEvent);

    const feature = this.map.forEachFeatureAtPixel(
      pixel,
      someFeature => someFeature, // return first element
      { hitTolerance: 2 }
    );

    // control an css class somehwere or use style.
    map.getTarget().style.cursor = feature ? 'pointer' : '';
  });

对于 real-live 旋转：

用户按住鼠标，触发mousedown
存储光标的 startPosition 并切换 "isRotating" 标志
在pointermove事件中（见上），（if isRotating）使用position计算相对于startPosition的变化来更新旋转
（可能是可选的）当触发 mouseup 时，应用最终旋转并将 isRotating 标志切换回来

Answer 2

ol-ext 项目提供了一组很酷的扩展，包括与 move/rotate 对象的交互。看看这个例子：http://viglino.github.io/ol-ext/examples/interaction/map.interaction.transform.html @+

Openlayers React 旋转多边形功能

Openlayers React rotate polygon feature

openlayers

reactjs

编辑：