在高地图中的世界地图上的两个标记之间绘制小的对称弧线路径

Question

我正在使用Highmaps以其演示Simple flight routes（jsfiddle）作为起点来创建飞行路线图。当我更新代码以使用世界地图时，位置/标记之间的线路径被夸大的曲线扭曲了。

请参见my jsfiddle，其中我仅将演示内容修改为以下内容：

HTML

<!-- line 5 -->
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

JavaScript

// line 39
mapData: Highcharts.maps['custom/world'],
// line 47
data: Highcharts.geojson(Highcharts.maps['custom/world'], 'mapline'),

请参见两者之间的区别，其中before是Highcharts演示，而after是我如上所述的一些更改：

通过函数pointsToPath计算路径，该函数使用SVG中的二次贝塞尔曲线Q来绘制标记之间绘制的线。

// Function to return an SVG path between two points, with an arc
function pointsToPath(from, to, invertArc) {
    var arcPointX = (from.x + to.x) / (invertArc ? 2.4 : 1.6),
        arcPointY = (from.y + to.y) / (invertArc ? 2.4 : 1.6);
    return 'M' + from.x + ',' + from.y + 'Q' + arcPointX + ' ' + arcPointY +
            ',' + to.x + ' ' + to.y;
}

如果修改弧形点2和x的功能以总是除以y，则标记之间会出现一条直线：

var arcPointX = (from.x + to.x) / 2,
    arcPointY = (from.y + to.y) / 2;

我不确定数学会得出更小的，不太夸张的曲线。

理想情况下，根据MDN - Paths中的示例，我希望线是对称的]

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

使用世界地图数据，如何计算标记之间的直线路径以显示较小或对称的曲线？

我正在使用Highmaps以其演示简单飞行路线（jsfiddle）为起点来创建飞行路线图。当我更新代码以使用世界地图时，位置之间的线路径/ ...

Answer 1

您只需要使分母接近2.0，因为当分母为2.0时，这是一条完美的直线：https://jsfiddle.net/my7bx50p/1/