首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >绘制一条具有给定半径和两个位置的曲线

绘制一条具有给定半径和两个位置的曲线
EN

Stack Overflow用户
提问于 2014-07-24 08:09:18
回答 2查看 5.1K关注 0票数 1

我有两个位置,在这两个位置之间,我必须根据半径绘制一条曲线。我画了一幅画:

我知道怎么画圆圈。但如何只画圆圈的一部分呢?

以下是已知的参数:

  • 当前位置
  • 下一地点
  • 曲线/圆半径

如果有人能告诉我如何在当前位置和下一个位置之间的圆圈上得到点,我可以用polyline来绘制曲线。但是如何计算位置呢?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-08-05 08:46:52

我为我的问题找到了解决办法。

我所做的是

  • 获取两个点之间的距离(当前位置和下一个位置)
  • 计算曲线的矢状面的值。
  • 计算当前位置和下一个位置的中点。
  • 计算行当前位置和下一个位置的标题。
  • 从中点开始,使用标题=在上面的步骤+ 90中计算的标题(如果您希望中心位于直线的右侧)或标题=在上面的步骤- 90中计算的标题(如果您希望中心位于直线的左侧)和距离=半径-射手,计算偏移点。

矢状面可以用以下公式计算:

哪里,

l是当前位置与下一个位置之间距离的一半。

r是曲线半径

s是射手

我使用的代码是:

代码语言:javascript
运行
复制
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))));
    }
票数 1
EN

Stack Overflow用户

发布于 2014-07-26 07:43:36

你可以用这个Answer画弧。

找到弧形的中心。

您可以使用Google Geometry库来查找两个标记之间的弦长、其方位和弧点的位置。

来自文档的

computeDistanceBetween(从:LatLng,到:LatLng,半径?:number )返回两个LatLngs之间的距离,以米为单位。半径默认为以米为单位的地球半径(6378137)。 computeHeading( from : LatLng,to: LatLng )将标题从一个LatLng返回到另一个LatLng。标题以顺时针方向在范围内从北表示[-180,180]为一个数字。 computeOffset(出发地: LatLng,距离:number,标题:number,radius?:number)返回从指定标题中的原点(从北顺时针方向表示)的距离为LatLng的LatLng。

先找到两个标记之间的距离

代码语言:javascript
运行
复制
var spherical = google.maps.geometry.spherical; 
var point1 = markers[0].getPosition();
var point2 = markers[1].getPosition();
var length = google.maps.geometry.spherical.computeDistanceBetween(point1,point2);

那就找轴承

代码语言:javascript
运行
复制
 var heading = google.maps.geometry.spherical.computeHeading(point1,point2);

正如你现在所知道的三角形的三边(弦长,半径(其它两面)),你用law of cosines计算圆弧中心的方位。(注意,注释中有两个解。)

代码语言:javascript
运行
复制
    function solveAngle(a, b, c) {  // Returns angle C using law of cosines
    var temp = (b * b + c * c - a * a) / (2 * b * c);
    if (temp >= -1 && temp <= 1)
        return Math.acos(temp);
    else
        throw "No solution";
   }

var baseAngle = solveAngle(radius, radius, c);
var vertexAngle = solveAngle(c,radius,radius);

利用baseAngle来确定中心点的方位。

vertexAngle是在绘制弧时使用的点数。

知道方位和半径,你可以找到弧的中心。

代码语言:javascript
运行
复制
var centerPoint = spherical.computeOffset(point1,radius,heading+baseAngle);

注意到距离,以米为单位。将方法中的半径改为3,959英里。

如果半径改变,中心就会改变。黄点是蓝点半径的2倍。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24928317

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档