通过百分比获取两点之间沿直线的经纬度坐标点

Question

通过百分比获取两点之间沿直线的经纬度坐标点

javascriptmathleafletlatitude-longitudegeo

3

在下面的图片中，您可以看到从一个点（黑色圆圈）到其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）的线条。

我需要知道如何通过距离百分比计算多个坐标，这些坐标位于pointA及其相关点之间。

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

测试用的CODEPEN链接： Codepen链接编辑 - 使用下面的正确答案所示的图像。

- Alan

对于你的搜索工作，你要找的点被称为“航线上的航路点”。 - O. Jones

@OllieJones 谢谢。我现在知道如何计算两点之间的距离了。现在我需要弄清楚如何根据距离的百分比来获取“途经点”？你知道有哪些链接可以帮助我进行这个计算吗？ - Alan

在这里：https://en.wikipedia.org/wiki/Great-circle_navigation#Finding_way-points 注意，如果你要从公寓到当地超市沿着一条直线行进，线性插值会工作得相当好，但如果你要从纽约去德里，它将表现得非常糟糕。 - O. Jones

@OllieJones 谢谢你的建议和链接 - Alan

2个回答

3

警告：此方法适用于线性坐标。正如Ollie Jones所提到的，虽然这对于短距离（或根据您的投影情况而定）是一个合理的近似值，但对于长距离或需要非常精确的百分点时，这将无法使用。

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

var ctx = document.getElementById("myChart").getContext("2d");

function drawPoint(color, point) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI, false);
    ctx.fill();
}

function drawLine(point1, point2) {
    ctx.strokeStyle = 'gray';
    ctx.setLineDash([5, 5]);    
    ctx.beginPath();
    ctx.moveTo(point1.x, point1.y);
    ctx.lineTo(point2.x, point2.y);
    ctx.stroke();    
}


function pointAtPercent(p0, p1, percent) {
    drawPoint('red', p0);
    drawPoint('green', p1);
    drawLine(p0, p1);

    var x;
    if (p0.x !== p1.x)
        x = p0.x + percent * (p1.x - p0.x);
    else
        x = p0.x;

    var y;
    if (p0.y !== p1.y)
        y = p0.y + percent * (p1.y - p0.y);
    else
        y = p0.y;

    var p = {
        x: x,
        y: y
    };
    drawPoint('blue', p);

    return p;
}


pointAtPercent({ x: 50, y: 25 }, { x: 200, y: 300 }, 0.2)
pointAtPercent({ x: 150, y: 25 }, { x: 300, y: 100 }, 0.6)
pointAtPercent({ x: 650, y: 300 }, { x: 100, y: 400 }, 0.4)

Fiddle - https://jsfiddle.net/goev47aL/

- potatopeelings

@Alan - 希望你已经在聊天中使用了那个（两个弧中点之间的间隔必须相同，无论点之间的距离如何）的示例代码？祝好！ - potatopeelings

这个？jsfiddle.net/gm7jx81a - potatopeelings

是的，奇怪的是，当我输入我的值时，它们与你的示例不同。我猜这可能是由于我的问题引起的。你有经常用于地理/坐标数学方程的链接吗？ - Alan

使用以下代码，计算出的方位似乎有一点偏差：

var y = Math.sin(λ2-λ1) * Math.cos(φ2);
var x = Math.cos(φ1)*Math.sin(φ2) -
        Math.sin(φ1)*Math.cos(φ2)*Math.cos(λ2-λ1);
var brng = Math.atan2(y, x).toDegrees();

- Alan

如果我在pointAtDistance()的x和y上有latitude和longitude的值，似乎无法正常工作。例如pointAtDistance({ x: 53.407371, y: -2.982342 }, { x: 53.40763, y: -2.984136 }, 70)？当使用纬度和经度值时，d的值要小得多。 - Alan

显示剩余13条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jpoehnelt · Accepted Answer

请访问以下网址以查看不同的方程式。 http://www.movable-type.co.uk/scripts/latlong.html

Get distance and bearing from origin to destination.
Convert percentage to distance in the applicable units.

Use bearing from #1, distance from #2 and origin to get resulting location

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)];
}