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

在下图中，您可以看到从一个点(黑色圆圈)到它的三个相关点()绘制了 3 条线.

图片

问题

如何计算沿每条线的点之间的经纬度点，使用两点之间距离的百分比?

例如，如果我想让位置能够沿着每条线绘制额外的圆，相差 20%?

我现在有什么代码

var 数据 = [{坐标":[53.409045，-2.985406]}，{坐标":[53.408747，-2.982862]}，{坐标":[53.407630，-2.984136]}，{坐标":[53.407142，-2.986931]}];var pointA = new L.LatLng(53.409045, -2.985406);变量点B；data.forEach(函数(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 与其相关点之间的多个坐标.

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

要测试的代码

解决方案

警告:这适用于线性坐标.正如 Ollie Jones 所提到的，虽然这对于短距离(或在某些情况下取决于您的投影)是一个合理的近似值，但对于长距离或如果您想要一个非常准确的百分比点，这将不起作用

您要查找的函数是 pointAtPercent.红色是起点(你的中心圆圈)，绿色是终点(你的终点圆圈)

var ctx = document.getElementById("myChart").getContext("2d");函数drawPoint(颜色，点){ctx.fillStyle = 颜色；ctx.beginPath();ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI, false);ctx.fill();}函数画线(点1，点2){ctx.strokeStyle = '灰色';ctx.setLineDash([5, 5]);ctx.beginPath();ctx.moveTo(point1.x, point1.y);ctx.lineTo(point2.x, point2.y);ctx.stroke();}功能点AtPercent(p0，p1，百分比){drawPoint('红色', p0);drawPoint('绿色', p1);画线(p0，p1)；变量 x;如果 (p0.x !== p1.x)x = p0.x + 百分比 * (p1.x - p0.x);别的x = p0.x;各不相同;如果 (p0.y !== p1.y)y = p0.y + 百分比 * (p1.y - p0.y);别的y = p0.y;变种 p = {x: x,是的:是的};drawPoint('蓝色', p);返回 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)

<小时>

小提琴 - https://jsfiddle.net/goev47aL/

In the image below, you can see that there 3 lines drawn from one point (the black circle) to its 3 related points ().

IMAGE

QUESTION

How to calculate latitude and longitude point between points along each line, using a percentage of the distance between the two points?

For example, if I wanted to get the position to be able to draw additional circles along each line with a 20% difference?

WHAT CODE I HAVE NOW

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

The only things the code above is doing is drawing a circle for each point and a line from the main circle (pointA) to the other circles (pointB)

I pretty much need to know how to calculate multiple coordinates, by percentage of distance, between the pointA and and its related points.

I need to make sure all green circle are the same distance from the center circle

CODEPEN TO TEST WITH

Codepen Link

EDIT - IMAGES OF WHAT i HAVE SO FAR USING THE CORRECT ANSWER BELOW

解决方案

Warning : this works on a linear coordinates. As Ollie Jones mentioned, while this is a reasonable approximation for short distances (or for certain cases depending on your projection), this won't work for long distance or if you want a very accurate point at percent

The function you are looking for is pointAtPercent. Red is the start point (your center circle) and green the end point (your end circles)

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/