如何判断绘制圆弧时是否需交换起止角度适配turf.lineArc()

原代码问题分析 #

你提供的代码逻辑混乱，没有结合圆弧的劣弧/优弧需求来判断是否交换起止角度，导致无法适配不同地图的圆弧方向，出现Map2画错大圆弧的情况。

核心逻辑梳理 #

turf.lineArc() 固定按顺时针方向绘制圆弧：

• 当顺时针角度跨度在0-180°时，默认绘制劣弧；
• 当顺时针角度跨度在180-360°时，绘制优弧。

我们需要结合已知的圆弧类型（劣弧/优弧），判断当前起止角度的顺时针跨度是否符合需求，不符合则交换起止角度。

修正代码 #

// 先把起止角度标准化到 0-360° 范围，避免负数或超范围的角度干扰计算
startAngle = (startAngle % 360 + 360) % 360;
endAngle = (endAngle % 360 + 360) % 360;

// 计算顺时针方向从 startAngle 到 endAngle 的角度跨度（0-360°）
const clockwiseDelta = (endAngle - startAngle + 360) % 360;

// 根据实际需求设置：true=需要劣弧（<180°），false=需要优弧（>180°）
const isMinorArc = true;

// 判断是否需要交换起止角度：
// 1. 要画劣弧，但当前顺时针跨度>180°（此时逆时针才是目标劣弧），交换
// 2. 要画优弧，但当前顺时针跨度<180°（此时逆时针才是目标优弧），交换
if ((isMinorArc && clockwiseDelta > 180) || (!isMinorArc && clockwiseDelta < 180)) {
  [startAngle, endAngle] = [endAngle, startAngle];
}

// 生成正确的圆弧
const arc = turf.lineArc(center, radius, startAngle, endAngle, options);

代码说明 #

1. 角度标准化：确保所有角度都在0-360°区间，避免负数或超范围值导致计算偏差。
2. 顺时针跨度计算：(endAngle - startAngle + 360) % 360 能精准得到顺时针方向的角度差，范围稳定在0-360°。
3. 交换判断：完全贴合你需要的圆弧类型，只在起止角度为逆时针方向时交换，保证turf.lineArc()画出的圆弧和预期一致。

以你的Map2场景为例：原起止角度的顺时针跨度是353°（优弧），但你需要的是7°劣弧，此时isMinorArc为true，触发交换逻辑，交换后顺时针跨度变为7°，就能画出正确的劣弧。

内容的提问来源于stack exchange，提问作者tj26