OpenLayers - 在修改时锁定框或矩形几何体的旋转

Question

Openlayers为绘制框和矩形提供了有用的功能，并且还具有ol.geom.Geometry.prototype.rotate（angle，anchor），用于围绕某个锚旋转几何体。是否可以在修改时锁定框/矩形的旋转？

使用位于here的OpenLayers示例绘制具有特定旋转的框以说明要点：

我希望盒子/矩形能够保持其旋转，同时仍然可以将侧面拖得更长更短。有没有一种简单的方法来实现这一目标？

Answer 1

回答我提出的解决方案。

首先，将特征添加到ModifyInteraction，以便您可以通过拖动特征的角来进行修改。

this.modifyInteraction = new Modify({
    deleteCondition: eventsCondition.never,
    features: this.drawInteraction.features,
    insertVertexCondition: eventsCondition.never,
});
    this.map.addInteraction(this.modifyInteraction);

此外，在事件“modifystart”和“modifyend”上添加事件处理程序。

this.modifyInteraction.on("modifystart", this.modifyStartFunction);
this.modifyInteraction.on("modifyend", this.modifyEndFunction);

“modifystart”和“modifyend”的功能如下所示。

private modifyStartFunction(event) {
    const features = event.features;
    const feature = features.getArray()[0];
    this.featureAtModifyStart = feature.clone();
    this.draggedCornerAtModifyStart = "";
    feature.on("change", this.changeFeatureFunction);
}

private modifyEndFunction(event) {
    const features = event.features;
    const feature = features.getArray()[0];
    feature.un("change", this.changeFeatureFunction);

    // removing and adding feature to force reindexing
    // of feature's snappable edges in OpenLayers
    this.drawInteraction.features.clear();
    this.drawInteraction.features.push(feature);
    this.dispatchRettighetModifyEvent(feature);
}

changeFeatureFunction位于下方。只要用户仍在修改/拖动其中一个角，就会对几何所做的每个更改调用此函数。在这个函数中，我做了另一个函数，将修改后的矩形再次调整为矩形。这个“Rectanglify”功能移动与刚刚被用户移动的角落相邻的角落。

private changeFeatureFunction(event) {
    let feature = event.target;
    let geometry = feature.getGeometry();

    // Removing change event temporarily to avoid infinite recursion
    feature.un("change", this.changeFeatureFunction);

    this.rectanglifyModifiedGeometry(geometry);

    // Reenabling change event
    feature.on("change", this.changeFeatureFunction);
}

没有太多细节，rectanglify功能需要

1. 以弧度为单位查找几何体的旋转
2. 用弧度* -1反向旋转（例如geometry.rotate（弧度*（ - 1），锚点））
3. 更新拖动角的相邻角（当我们有一个平行于x和y轴的矩形时更容​​易做到）
4. 用我们在1中找到的旋转向后旋转

--

为了获得矩形的旋转，我们可以这样做：

export function getRadiansFromRectangle(feature: Feature): number {
    const coords = getCoordinates(feature);

    const point1 = coords[0];
    const point2 = coords[1];
    const deltaY = (point2[1] as number) - (point1[1] as number);
    const deltaX = (point2[0] as number) - (point1[0] as number);

    return Math.atan2(deltaY, deltaX);
}