绘制一条给定半径的曲线和两个位置 [英] Draw a curved line with given radius, and two locations

问题描述

我有两个位置，我必须根据半径绘制一条曲线。我绘制了一张图片：

我知道如何绘制一个圆圈。但是如何只绘制圆的一部分？

以下是已知的参数：

• 当前位置


• 下一个位置


• 曲线/圆的半径
  

如果有人能告诉我如何获取当前位置和下一个位置之间的圆点，我可以使用折线来绘制曲线。但如何计算位置？

解决方案

我为我的问题找到了一个解决方案。

我所做的是

• 获取两点之间的距离（当前位置和下一个位置）


• 计算曲线的斜线''值。


• 计算当前位置的中点和
  
• 计算线路当前位置和下一个位置的标题。


• 从中点开始，使用 heading = heading计算在步骤+ 90 之上（如果你希望中心位于线的右侧）或标题=在上述步骤中计算的标题 - 90 （如果你想让中间位于左侧线的一侧）和距离=半径 - 弧矢，计算偏移点。
  

可以使用下面的公式计算sagitta：

其中，

l 是当前位置和下一个位置之间距离的一半。 曲线半径

s 是sagitta

我使用的代码是：
$ b $ pre> 函数DrawCurvedLine（startLatitude，startLongitude，endLatitude，endLongitude，roc，lineColor）{
var距离;
var latLng1，latLng2;
var sagitta;
var midPoint;
var heading;
var roc;
var center;
var arc = new Array（）;

curvePoints = [];
//创建当前和预测的latlng对象
latLng1 = new google.maps.LatLng（startLatitude，startLongitude）;
latLng2 = new google.maps.LatLng（endLatitude，endLongitude）;

//计算当前位置和预测位置之间的距离
distance = google.maps.geometry.spherical.computeDistanceBetween（currentLatLng，predictedLatLng）;
sagitta = computeSagitta（roc，（distance / 2））;
midPoint = getMidPoint（latLng1，latLng2）;
heading = google.maps.geometry.spherical.computeHeading（latLng1，latLng2）;
heading = headingClPl + 90;

center = google.maps.geometry.spherical.computeOffset（midPoint，（roc - sagitta），headingClPl）;

var Heading1 = google.maps.geometry.spherical.computeHeading（center，latLng1）;
var Heading2 = google.maps.geometry.spherical.computeHeading（center，latLng2）;

var i = 0; （Heading1 + i）<= Heading2 ||（Heading2 + i）<= Heading1）{
if（radiusOfCurve <0）{
arcPts.push（google。 maps.geometry.spherical.computeOffset（centerOfCurve，roc，Heading1 - i））;
}
else {
arcPts.push（google.maps.geometry.spherical.computeOffset（centerOfCurve，roc，Heading1 + i））;
}
i ++;


var curvedLine = new google.maps.Polyline（{
path：arcPts，
图标：[{
图标：{
路径：google.maps.SymbolPath.FORWARD_OPEN_ARROW，
比例：3，
strokeColor：lineColor，
strokeOpacity：1，
strokeWeight：1.3，
fillColor：'透明'，
fillOpacity：0
}，
偏移：'100％'
}]，
strokeColor：lineColor，
strokeOpacity：0.5，
strokeWeight：2，
map：map
}）;

函数computeSagitta（半径，长度）{
//半径是圆的半径。长度是和弦的一半长度
return（radius - （Math.sqrt（（radius * radius） - （length * length））））;
}


I have two locations between which I have to draw a curved line based on a radius. I have drawn an image:

I know how to draw a circle. But how to draw only a part of the circle?

The following are the known parameters:

• Current Location
• Next Location
• Radius of the curve/circle

If someone can tell me how to get the points along the circle between the Current Location and Next Location, I can use polyline to plot the curve. But how to compute the locations?

解决方案

I found a solution for my question.

What I did was

• Get the distance between the two points (current location and next location)
• Calculate the value of the sagitta 's' of the curve.
• Compute the mid-point of the current location and next location.
• Compute the heading of line current location and next location.
• From mid-point, with heading = heading computed in above step + 90 (if you want the center to be on right side of the line) or heading = heading computed in above step - 90 (if you want the center to be on left side of the line) and distance = radius - sagitta, compute offset point.

The sagitta can be computed using the formula:

where,

l is half of the distance between current location and next location

r is radius of curve

s is the sagitta

The code I used is:

function DrawCurvedLine(startLatitude, startLongitude, endLatitude, endLongitude, roc, lineColor) {
    var distance;
    var latLng1, latLng2;
    var sagitta;
    var midPoint;
    var heading;
    var roc;
    var center;
    var arc = new Array();

    curvePoints = [];
    // Create current and predicted latlng objects
    latLng1 = new google.maps.LatLng(startLatitude, startLongitude);
    latLng2 = new google.maps.LatLng(endLatitude, endLongitude);

    // Compute the distance between current location and predicted location
    distance = google.maps.geometry.spherical.computeDistanceBetween(currentLatLng, predictedLatLng);
    sagitta = computeSagitta(roc, (distance / 2));
    midPoint = getMidPoint(latLng1, latLng2);
    heading = google.maps.geometry.spherical.computeHeading(latLng1, latLng2);
    heading = headingClPl + 90;

    center = google.maps.geometry.spherical.computeOffset(midPoint, (roc - sagitta), headingClPl);

    var Heading1 = google.maps.geometry.spherical.computeHeading(center, latLng1);
    var Heading2 = google.maps.geometry.spherical.computeHeading(center, latLng2);

    var i = 0;
    while ((Heading1 + i) <= Heading2 || (Heading2 + i) <= Heading1) {
        if (radiusOfCurve < 0) {
            arcPts.push(google.maps.geometry.spherical.computeOffset(centerOfCurve, roc, Heading1 - i));
        }
        else {
            arcPts.push(google.maps.geometry.spherical.computeOffset(centerOfCurve, roc, Heading1 + i));
        }
        i++;
    }

    var curvedLine = new google.maps.Polyline({
        path: arcPts,
        icons: [{
            icon: {
            path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
            scale: 3,
            strokeColor: lineColor,
            strokeOpacity: 1,
            strokeWeight: 1.3,
            fillColor: 'transparent',
            fillOpacity: 0
            },
            offset: '100%'
        }],
        strokeColor: lineColor,
        strokeOpacity: 0.5,
        strokeWeight: 2,
        map: map
    });

    function computeSagitta(radius, length){
        // radius is radius of circle. length is the half length of chord
        return (radius - (Math.sqrt((radius * radius) - (length * length))));
    }

这篇关于绘制一条给定半径的曲线和两个位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！