按百分比

Question

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

编辑 - 使用正确的答案，我有多远的图像

Answer 1

请参阅此页面了解您的不同方程式。 http://www.movable-type.co.uk/scripts/latlong.html

1. 从起点到目的地获取距离和承受力。
2. 在适用的单位中将百分比转换为距离。

3. 使用＃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)];
   }
   

Answer 2

警告：这适用于线性坐标。正如奥利·琼斯所提到的，虽然这是短距离（或某些情况取决于您的投影）的合理近似值，但这对于长距离不起作用，或者如果您想要一个非常准确的点百分比

您正在寻找的功能是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)

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