沿两点之间的直线按百分比获取纬度和经度点 [英] Get latitude and longitude points along a line between two points, by percentage

问题描述

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

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

图像

问题

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

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

例如，如果我想获得能够沿着每条线以20％的差异绘制更多圆的位置?

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

我现在拥有什么代码

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)画一条线

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)

我非常需要了解如何通过pointA及其相关点之间的距离百分比来计算多个坐标.

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进行测试

Codepen链接

编辑-使用下面的正确答案进行的拍摄的图像

推荐答案

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

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

您要查找的功能是pointAtPercent.红色是起点(您的圆心)，绿色是终点(您的圆心)

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)

---

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

这篇关于沿两点之间的直线按百分比获取纬度和经度点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！