Openlayers React旋转面要素

Question

我在这里设置了一个简单的反应/开放层（https://jsfiddle.net/mcneela86/Lx44yc3m/），我已经设置了它来证明我的问题。

1. 我有一张目前正在使用的简单地图。
2. 允许用户绘制当前正在工作的多边形的工具。
3. 允许用户移动当前正在工作的多边形的工具。
4. 允许用户旋转当前不工作的多边形的工具 - 这是我需要帮助的地方，并且包含了其他工具，以帮助任何人了解我的应用是如何工作的。

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

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

所以我不知道的是如何获取用户输入，让我们说mousedown，检测他们正在移动鼠标并使用rotate()函数中的值来改变旋转多边形？

非常感谢任何帮助。

编辑：

以下是关于多边形上的边界框/控制柄的含义示例：

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' : '';
  });

用于实时轮换：

1. 用户按住鼠标，触发mousedown
2. 存储光标的startPosition并切换＆＃34; isRotating＆＃34;标志
3. 在pointermove事件中（见上文），（如果isRotating）使用位置来计算startPosition的相对更改以更新旋转
4. （可能是可选的）当触发mouseup时，应用最终旋转并切换isRotating标志

Answer 2

ol-ext项目提供了一组很酷的扩展，包括移动/旋转对象的交互。 看一下示例：http://viglino.github.io/ol-ext/examples/interaction/map.interaction.transform.html @ +