如何画圆之间的最短路径

Question

我正在构建一个网络应用程序（在 Qwik 中），需要解析 .xctsk 文件（滑翔伞比赛任务），并在地图上绘制任务。任务由一堆按给定顺序的圆圈组成。

我已经成功实现了文件解析和绘制圆圈，现在我需要绘制按给定顺序链接每个圆圈的最短路径。它最终应该看起来像这样：

我可以轻松地用折线连接圆的中心，如下面的屏幕截图，但我不知道如何找到给出最短路径的点。任何想法都会非常受欢迎！

这是我的代码：

        task?.turnpoints.forEach((tp, index) => {
          circle([tp.waypoint.lat, tp.waypoint.lon], {
            radius: tp.radius,
            color: "orange",
          }).addTo(mapContainer$.value!);

          if (index < task.turnpoints.length - 1) {
            polyline(
              [
                [
                  task.turnpoints[index].waypoint.lat,
                  task.turnpoints[index].waypoint.lon,
                ],
                [
                  task.turnpoints[index + 1].waypoint.lat,
                  task.turnpoints[index + 1].waypoint.lon,
                ],
              ],
              { color: "black" },
            ).addTo(mapContainer$.value!);
          }
        });

我尝试在其他论坛上寻找信息，以及数学公式，但没有找到任何线索。

Answer 1

因为您似乎想要到达圆的最近边缘而不是中心，所以这样的方法可能会起作用：

    actualPoints = [{
      x: task.turnpoints[0].waypoint.lat,
      y: task.turnpoints[0].waypoint.lon,
    }];

    task?.turnpoints.forEach((tp, index) => {
        circle([tp.waypoint.lat, tp.waypoint.lon], {
          radius: tp.radius,
          color: "orange",
        }).addTo(mapContainer$.value!);

        if (index < task.turnpoints.length - 1) {

          const pointA = actualPoints[index]

          const pointB = {
            x: task.turnpoints[index + 1].waypoint.lat,
            y: task.turnpoints[index + 1].waypoint.lon,
          }

          const vectorDistance = {
            x: pointA.x - pointB.x,
            y: pointA.y - pointB.y,
          }

          const angle = Math.atan2(vectorDistance.x, vectorDistance.y)

          const normalExtended = {
            x: Math.cos(angle) * tp.radius,
            y: Math.sin(angle) * tp.radius,
          }

          const newPoint = {
            x: normalExtended.x + pointB.x,
            y: normalExtended.y + pointB.y,
          }

          polyline(
            [
              [
                pointA.x,
                pointA.y
              ],
              [
                newPoint.x,
                newPoint.y
              ],
            ],
            { color: "black" },
          ).addTo(mapContainer$.value!);
        }
      });