javascript - Get latitude and longitude points along a line between two points, by percentage - Stack Overflow

admin管理员组

文章数量:1287080

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

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

• javascript
• math
• leaflet
• latitude-longitude
• geo

Share Improve this question Follow edited Aug 3, 2015 at 9:36 Alan asked Jul 26, 2015 at 18:05 AlanAlan 36233 gold badges99 silver badges1818 bronze badges 4

• For your searching work, the points you're looking for are known as "waypoints" along a Great Circle Route. – O. Jones Commented Jul 26, 2015 at 18:12
• @OllieJones Thanks. I know how to get the distance. between the two points now. So I now need to figure out how to get the "waypoint" based on a percentage of the distance? Do you know of any links to help with the calculation for this? – Alan Commented Jul 26, 2015 at 18:27
• Here: en.wikipedia/wiki/… Notice linear interpolation will work acceptably well if you're tracing a line from your apartment to the local supermarket, but terribly if you're going from New York to New Delhi. – O. Jones Commented Jul 26, 2015 at 19:59
• @OllieJones Thanks for the advice and link – Alan Commented Jul 27, 2015 at 9:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

See this page for your different equations. http://www.movable-type.co.uk/scripts/latlong.html

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

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

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/goev47aL/

本文标签：