OpenLayers-修改时锁定框或矩形几何的旋转 [英] OpenLayers - lock rotation of box or rectangle geometry while modifying

问题描述

Openlayers提供了用于绘制框和矩形的有用功能，并且还具有ol.geom.Geometry.prototype.rotate(angle，anchor)，用于围绕某个锚点旋转几何图形.修改时可以锁定盒子/矩形的旋转吗?

Openlayers provides useful functions for drawing boxes and rectangles and also has ol.geom.Geometry.prototype.rotate(angle, anchor) for rotating a geometry around a certain anchor. Is it possible to lock the rotation of a box/rectangle while modifying it?

使用位于此处的OpenLayers示例来绘制一个带有以下内容的框旋转一定角度来说明这一点:

Using the OpenLayers example located here to draw a box with a certain rotation to illustrate the point:

我希望盒子/矩形能够保持其旋转，同时仍然能够拖动边长和短.有没有简单的方法可以做到这一点?

I would like the box/rectangle to maintain its rotation while still being able to drag the sides longer and shorter. Is there a simple way to achieve this?

推荐答案

回答我提出的解决方案.

Answering with the solution I came up with.

首先，将功能部件添加到ModifyInteraction中，以便您可以通过拖动功能部件的角来进行修改.

First of all, add the feature(s) to a ModifyInteraction so you are able to modify by dragging the corners of the feature.

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

此外，在事件"modifystart"和"modifyend"上添加事件处理程序.

Also, add event handlers upon the events "modifystart" and "modifyend".

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

"modifystart"和"modifyend"函数看起来像这样.

The functions for "modifystart" and "modifyend" look like this.

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在下面.只要用户仍在修改/拖动边角之一，对几何体所做的每一次更改都将调用此函数.在此函数内部，我做了另一个函数，将修改后的矩形再次调整为矩形.此重新排列"功能可移动与用户刚移动的角相邻的角.

The changeFeatureFunction is below. This function is called for every single change which is done to the geometry as long as the user is still modifying/dragging one of the corners. Inside this function, I made another function to adjust the modified rectangle into a rectangle again. This "Rectanglify"-function moves the corners which are adjacent to the corner which was just moved by the user.

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

无需过多介绍，矩形函数就需要

Without going into too much detail, the rectanglify-function needs to

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

-

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

In order to get the rotation of the rectangle, we can do this:

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

这篇关于OpenLayers-修改时锁定框或矩形几何的旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！