openlayers 绘制有角度的矩形

附上效果图：

要想绘制这种矩形首先得知道二个数学公式和一个定理。

一条公式：y=kx+b
一条定理：两条线若垂直则斜率相乘等于-1.
斜率k = （y2-y1）/（x2-x1）

再附上代码，想要直接拿走，若想了解原理可以继续往下看。

 const draw=() =>{
const currentdraw = new Draw({
            
            source: source,  //你的数据源
            type: 'LineString',
            style: featureStyleBox, //绘制的样式
            geometryFunction: function (coordinates, geometry) {
                const p1 = coordinates[0]
                const p2 = coordinates[1]
                if (coordinates.length > 2) {
                    const p3 = coordinates[2]
                    const topRight = intersection(p1, p2, p3)
                    const k1 = (p1[1] - p2[1]) / (p1[0] - p2[0]);   //斜率
                    const b1 = p3[1] - k1 * p3[0];
                    const p4 = [1, k1 + b1]
                    const bottomLeft = intersection(p3, p4, p1)
                    if (!geometry) {
                        geometry = new Polygon([[p1, topRight, p3, bottomLeft, p1]])
                    } else {
                        geometry.setCoordinates([[p1, topRight, p3, bottomLeft, p1]])
                    }
                } else {
                    if (!geometry) {
                        geometry = new Polygon([[p1, p1, p2, p2, p1]])
                    } else {
                        geometry.setCoordinates([[p1, p1, p2, p2, p1]])
                    }
                }
                return geometry
            },
            maxPoints: 3,
            condition: function (event) {
                return event.originalEvent.button === 0; // 确保是左键绘制完毕
            }
        })
        map.addInteraction(currentdraw)  //添加绘制事件
        currentdraw.on('drawend', handleDrawEnd)  //绘制结束后的回调
}



/**
 * @description 斜率推导公式，垂直推导p2点的坐标与p4点的坐标
 */
const intersection = (p1, p2, p3) => {
    const p1x = p1[0]
    const p1y = p1[1]
    const p2x = p2[0]
    const p2y = p2[1]
    const p3x = p3[0]
    const p3y = p3[1]
    if (p1[0] === p2[0]) {
        return [p1[0], p3[1]]
    } else {
        const k = (p1y - p2y) / (p1x - p2x)
        const b = p1y - k * p1x
        const m = p3x + k * p3y
        const x = (m - k * b) / (k * k + 1)
        const y = k * x + b
        return [x, y]
    }

}

const handleDrawEnd  = (e) =>{
 
    const feature = evt.feature


}

数学原理

当绘制第一个点和第二个点的时候就可以确定这条线的斜率，即知道矩形的绘制角度。（但是第二个点会随着第三个点的变化而动态改变位置，但是斜率不变。）

由于矩形的两条线垂直。所以我们可以确定第二条线的斜率= -1/k。

从效果图我们可以看见，当鼠标第一次绘制的时候，第一个点是固定不变的。第二个点是动态改变的，第三个点是跟随着鼠标的位置而改变的。 

因此，我们有4个条件是已知的

1.第一个点坐标。 2.第三个点坐标。3.第一条线斜率。4.第二条线斜率。

根据已知条件和公式，从而我们可以动态计算出第二个点的位置。

以下是推算：

第一个点(p1x，p1y)和第二个点（p2x，p2y）形成一条线， 由公式  可以算出斜率k。

也可以推算出b = p1y - k * p1x。

而第二条线是由第二个点(p2x，p2y)和第三个点(p3x，p3y)形成的。但是我们已知点三，点二是动态计算的。又因为公式 y= kx+b 和 这两条线是垂直的。所以我们可以知道第二条线的斜率L=-1/k。

第二条线的截距m= p3y -（ -k） *  p3x。

从而知道了这两条线的公式。 y = Lx+m  以及 y = kx +b 。  

而第二个点都可以由这两条线的公式推出来(即点二的位置是符合这两个公式的，因为点二的位置就是这两条线的交点)。所以可以得出 Lx+m = kx+b = y2  根据推算就能得出  x = (m - k * b) / (k * k + 1)，这里自行去演算。

y= k * x + b 。从而得出第二个点的坐标。

同理第四个点的坐标也是这样算。