Javascript 按百分比沿两点之间的直线获取纬度和经度点

在下图中，您可以看到从一个点（黑圈）到其3个相关点（）绘制了3条线

图像

问题

如何使用两点之间距离的百分比来计算每条线上点之间的纬度和经度点

例如，如果我想得到一个位置，能够沿着每一条线画出额外的圆，并且有20%的差异

我现在有什么代码

var data = [
  { "coords" : [ 53.409045, -2.985406 ]},
  { "coords" : [ 53.408747, -2.982862 ]},
  { "coords" : [ 53.407630, -2.984136 ]},
  { "coords" : [ 53.407142, -2.986931 ]}
];


var pointA = new L.LatLng(53.409045, -2.985406);
var pointB; 

data.forEach(function(d) {
  pointB = new L.LatLng(d.coords[0], d.coords[1]);
  L.polyline([pointA, pointB]).addTo(map);
  L.circle([d.coords[0], d.coords[1]], 10).addTo(map);
});

上面的代码所做的唯一事情就是为每个点画一个圆，并从主圆（pointA）到其他圆（pointB）画一条线

我非常需要知道如何计算多个坐标，通过距离的百分比，在点A和它的相关点之间

我需要确保所有绿色圆圈与中心圆圈的距离相同

使用代码笔进行测试

编辑-使用下面的正确答案编辑到目前为止我所拥有的图片

var data = [
  { "coords" : [ 53.409045, -2.985406 ]},
  { "coords" : [ 53.408747, -2.982862 ]},
  { "coords" : [ 53.407630, -2.984136 ]},
  { "coords" : [ 53.407142, -2.986931 ]}
];


var pointA = new L.LatLng(53.409045, -2.985406);
var pointB; 

data.forEach(function(d) {
  pointB = new L.LatLng(d.coords[0], d.coords[1]);
  L.polyline([pointA, pointB]).addTo(map);
  L.circle([d.coords[0], d.coords[1]], 10).addTo(map);
});

---

有关不同的方程式，请参见本页

获取从起点到终点的距离和方位

以适用单位将百分比转换为距离

使用从#1的方位角、从#2的距离和原点获得结果位置

function destination(lat, lon, bearing, distance) {
    var R = 6378.1, lat, lon, latDest, lonDest;

    // convert to radians
    lat = lat * (Math.PI / 180);
    lon = lon * (Math.PI / 180);
    bearing = bearing * (Math.PI / 180);

    latDest = Math.asin(Math.sin(lat) * Math.cos(distance / R) +
        Math.cos(lat) * Math.sin(distance / R) * Math.cos(bearing));

    lonDest = lon + Math.atan2(Math.sin(bearing) * Math.sin(distance / R) * Math.cos(lat),
            Math.cos(distance / R) - Math.sin(lat) * Math.sin(latDest));

    return [latDest * (180 / Math.PI), lonDest * (180 / Math.PI)];
}

---

有关不同的方程式，请参见本页

获取从起点到终点的距离和方位

以适用单位将百分比转换为距离

使用从#1的方位角、从#2的距离和原点获得结果位置

function destination(lat, lon, bearing, distance) {
    var R = 6378.1, lat, lon, latDest, lonDest;

    // convert to radians
    lat = lat * (Math.PI / 180);
    lon = lon * (Math.PI / 180);
    bearing = bearing * (Math.PI / 180);

    latDest = Math.asin(Math.sin(lat) * Math.cos(distance / R) +
        Math.cos(lat) * Math.sin(distance / R) * Math.cos(bearing));

    lonDest = lon + Math.atan2(Math.sin(bearing) * Math.sin(distance / R) * Math.cos(lat),
            Math.cos(distance / R) - Math.sin(lat) * Math.sin(latDest));

    return [latDest * (180 / Math.PI), lonDest * (180 / Math.PI)];
}

---

警告：这适用于线性坐标。正如Ollie Jones所提到的，虽然这是短距离（或某些情况下取决于您的投影）的合理近似值，但这对于长距离或您希望在百分比处获得非常精确的点来说是行不通的

您要查找的函数是pointAtPercent。红色是起点（你的中心圆），绿色是终点（你的终点圆）

---

---

小提琴-

警告：这适用于线性坐标。正如Ollie Jones所提到的，虽然这是短距离（或某些情况下取决于您的投影）的合理近似值，但这对于长距离或您希望在百分比处获得非常精确的点来说是行不通的

您要查找的函数是pointAtPercent。红色是起点（你的中心圆），绿色是终点（你的终点圆）

---

---

---

FIDLE-

对于您的搜索工作，您正在寻找的点被称为大圆路线上的“航路点”。@OllieJones谢谢。我知道怎么走这段距离。现在在两点之间。所以我现在需要弄清楚如何根据距离的百分比得到“航路点”？你知道有什么链接可以帮助你进行计算吗？这里：请注意，如果你正在追踪从公寓到当地超市的一条线，线性插值可以很好地工作，但是如果你正在从纽约到新德里，那就糟糕了。@OllieJones谢谢你的建议和链接，谢谢你的搜索工作，您正在寻找的点被称为大圆路线上的“航路点”。@OllieJones谢谢。我知道怎么走这段距离。现在在两点之间。所以我现在需要弄清楚如何根据距离的百分比得到“航路点”？你知道有什么链接可以帮助你进行这方面的计算吗？这里：请注意，如果你正在追踪从公寓到当地超市的一条线，那么线性插值可以很好地工作，但是如果你正在从纽约到新德里，那么线性插值会非常有效。@OllieJones谢谢你的建议和链接你在提供的代码笔上测试过吗？我似乎无法让它发挥作用。多谢了，似乎起作用了，但少了一点。可能轴承计算关闭了？嗨，使用L

var y=Math.sin（λ2-λ1）*Math.cos（φ2），轴承似乎关闭了一点；var x=数学cos（φ1）*数学sin（φ2）-数学sin（φ1）*数学cos（φ2）*数学cos（λ2-λ1）；var brng=Math.atan2（y，x）.toDegrees（）

您是否在提供的codepen上对此进行了测试？我似乎无法让它发挥作用。多谢了，似乎起作用了，但少了一点。可能轴承计算关闭了？嗨，使用L

var y=Math.sin（λ2-λ1）*Math.cos（φ2），轴承似乎关闭了一点；var x=数学cos（φ1）*数学sin（φ2）-数学sin（φ1）*数学cos（φ2）*数学cos（λ2-λ1）；var brng=Math.atan2（y，x）.toDegrees（）@Alan-希望你在聊天中找到另一个（两个弧中点之间的间距必须相同，无论点之间的距离如何）使用小提琴？干杯非常感谢。我现在将尝试在我的目标上实现它。我使用了上面答案中提供的示例，但是它似乎有点不正确，可能我的轴承计算不正确？是的，另一个现在好了。谢谢，我会的。我不认为我在工作中遇到了问题，我必须确保曲线的间隙是相同的。这个？jsfiddle.net/gm7jx81是的，奇怪的是，当我插入我的值时，它们不一样，就像你的小提琴一样。我想这是我的目的造成的。你有没有经常用于地理/坐标数学方程的链接？@Alan-希望你能在聊天中用小提琴找到另一个链接（两个弧中点之间的间距必须相同，无论点之间的距离如何）？干杯非常感谢。我现在将尝试在我的目标上实现它。我使用了上面答案中提供的示例，但是它似乎有点不正确，可能我的轴承计算不正确？是的，另一个现在好了。谢谢，我会的。我不认为我在工作中遇到了问题，我必须确保曲线的间隙是相同的。这个？jsfiddle.net/gm7jx81是的，奇怪的是，当我插入我的值时，它们不一样，就像你的小提琴一样。我想这是我的目的造成的。你有任何联系吗