Leaflet 的默认矩形是用 2 个对角点创建的
[...]
矩形可能是有角度的,这就是它具有挑战性的原因
请注意,Leaflet 的 L.Rectangle 是从 L.LatLngBounds 创建的,这是一个其中的边缘隐式与坐标网格对齐的边界框。不要使用边界框,而是依靠L.Polygon,提供所有四个点。
设 A 和 B 为矩形底边的点,C 为顶边的点。假设所有点都是 {x: Number, y: Number} 形式的 Javascript 结构,并假设您在欧几里得平面上工作(即不在大地水准面的表面上),
首先,calculate the distance from a point to a line defined by the other two points,即从 C 到 AB 定义的直线的距离。让它成为distance(注意它等于图中的“高度”):
var distance = Math.abs(
(A.y - B.y) * C.x - (A.x - B-x) * C.y + B.x * A.y - B.y * A.x )
) / Math.sqrt(
Math.pow(B.y - A.y, 2) + Math.pow(B.x - A.x, 2)
);
那么,设 AB 为从 A 到 B 的向量
var AB = { x: B.x - A.x, y: B.y - A.y };
(注意 AB 的长度等于图中的“宽度”)
计算一个垂直于 AB 的unit vector:
var perpendicular = {x: -AB.y, y: AB.x}
var perpendicularSize = Math.sqrt(AB.x * AB.x + AB.y * AB.y);
var unit = {x: perpendicular.x / perpendicularSize, y: perpendicular.y / perpendicularSize};
将该单位向量乘以从 C 到 AB 的距离,得到矩形“边”的向量:
var sideVector = { x: unit.x * distance, y: unit.y * distance };
...并通过将矩形边的向量偏移 A 和 B 来创建新点 D 和 E:
var D = { x: A.x + sideVector.x, y: A.y + sideVector.y };
var E = { x: B.x + sideVector.x, y: B.y + sideVector.y };
...您的矩形现在由点 ABDE 定义。请注意,C 在点 DE 定义的直线上。