問題描述

在下圖中，您可以看到從一個點(黑色圓圈)到它的三個相關(guān)點()繪制了 3 條線.

圖片

問題

如何計算沿每條線的點之間的經(jīng)緯度點，使用兩點之間距離的百分比?

例如，如果我想讓位置能夠沿著每條線繪制額外的圓，相差 20%?

我現(xiàn)在有什么代碼

var 數(shù)據(jù) = [{坐標(biāo)":[53.409045，-2.985406]}，{坐標(biāo)":[53.408747，-2.982862]}，{坐標(biāo)":[53.407630，-2.984136]}，{坐標(biāo)":[53.407142，-2.986931]}];var pointA = new L.LatLng(53.409045, -2.985406);變量點B；data.forEach(函數(shù)(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 與其相關(guān)點之間的多個坐標(biāo).

我需要確保所有綠色圓圈與中心圓圈的距離相同

要測試的代碼

警告:這適用于線性坐標(biāo).正如 Ollie Jones 所提到的，雖然這對于短距離(或在某些情況下取決于您的投影)是一個合理的近似值，但對于長距離或如果您想要一個非常準(zhǔn)確的百分比點，這將不起作用

您要查找的函數(shù)是 pointAtPercent.紅色是起點(你的中心圓圈)，綠色是終點(你的終點圓圈)

var ctx = document.getElementById("myChart").getContext("2d");函數(shù)drawPoint(顏色，點){ctx.fillStyle = 顏色；ctx.beginPath();ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI, false);ctx.fill();}函數(shù)畫線(點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('藍(lán)色', 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/

這篇關(guān)于沿兩點之間的直線獲取緯度和經(jīng)度點，按百分比的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！