按百分比获取两点之间连线上的经纬度点
Get latitude and longitude points along a line between two points, by percentage
在下图中,您可以看到从一个点(黑色圆圈)到它的 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) 的一条线
我非常需要知道如何计算点 A 及其相关点之间的多个坐标(按距离百分比)。
我需要确保所有绿色圆圈与中心圆的距离相同
代码测试
编辑 - 使用下面的正确答案到目前为止我所拥有的图像
请参阅此页面了解您的不同方程式。 http://www.movable-type.co.uk/scripts/latlong.html
- 获取从起点到终点的距离和方位。
- 将百分比转换为适用单位的距离。
使用#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)];
}
警告:这适用于线性坐标。正如 Ollie Jones 提到的,虽然这对于短距离来说是一个合理的近似值(或者对于某些情况取决于您的投影),但这不适用于长距离或者如果您想要一个非常准确的 point at percent
您要找的函数是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/
在下图中,您可以看到从一个点(黑色圆圈)到它的 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) 的一条线
我非常需要知道如何计算点 A 及其相关点之间的多个坐标(按距离百分比)。
我需要确保所有绿色圆圈与中心圆的距离相同
代码测试
编辑 - 使用下面的正确答案到目前为止我所拥有的图像
请参阅此页面了解您的不同方程式。 http://www.movable-type.co.uk/scripts/latlong.html
- 获取从起点到终点的距离和方位。
- 将百分比转换为适用单位的距离。
使用#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)]; }
警告:这适用于线性坐标。正如 Ollie Jones 提到的,虽然这对于短距离来说是一个合理的近似值(或者对于某些情况取决于您的投影),但这不适用于长距离或者如果您想要一个非常准确的 point at percent
您要找的函数是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/