Javascript - 如何计算线串的中点？

Question

使用给定的GeoJSON线串:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            2.6806640625,
            46.437856895024204
          ],
          [
            4.7021484375,
            50.20503326494332
          ],
          [
            13.271484375,
            47.010225655683485
          ],
          [
            17.2265625,
            52.855864177853974
          ]
        ]
      }
    }
  ]
}

我想找到确切的中间点.我不是指给定数组的中间元素,而是计算一个恰好位于线中间的中点.因此,如果一条线总长30公里,那么中点将被放置在15公里处.

我试着搜索npm这样的东西,却找不到.唯一靠近的图书馆能够在线上放置n个点,然后我可以得到中间点.但在我的情况下,它非常糟糕,因为精度不是那么好.

完美的选择是在JavaScript中实现此http://postgis.net/docs/manual-1.5/ST_Line_Interpolate_Point.html.

我怎样才能实现它？

Answer 1

这是一个有效的CodePen

以下代码将返回特定距离处的点.

对于这种特定情况,中点距离是总长度/ 2

假设我们的线串数组存储在中,就像这样调用main函数 points

var totalLength = totalLen(points);
var midDistance = totalLength / 2;
var midPoint = getPointByDistance(points, midDistance)

使用Javascript

myData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
           2.6806640625,
          46.437856895024204
        ],
        [
          4.7021484375,
          50.20503326494332
        ],
        [
          13.271484375,
          47.010225655683485
        ],
        [
          17.2265625,
          52.855864177853974
        ]
      ]
    }
  }]
}
var points = myData.features[0].geometry.coordinates
var totalLength = totalLen(points);
var midDistance = totalLength / 2;
var midPoint = getPointByDistance(points, midDistance)
alert ("midPoint = " + midPoint[0] + ", " + midPoint[1])
// main function
function getPointByDistance(pnts, distance) {
  var tl = totalLen(pnts);
  var cl = 0;
  var ol;
  var result;
  pnts.forEach(function(point, i, points) {
    ol = cl;
    cl += i ? lineLen([points[i-1], point]) : 0;
    if (distance <= cl && distance > ol){
      var dd = distance - ol;
      result = pntOnLine([points[i-1], point], dd);
    }
  });
  return result
};
// returns a point on a single line (two points) using distance // line=[[x0,y0],[x1,y1]]
function pntOnLine(line, distance) {
  t = distance / lineLen(line)
  xt = (1 - t) * line[0][0] + (t * line[1][0])
  yt = (1 - t) * line[0][1] + (t * line[1][1])
  return [xt, yt]
};
// returns the total length of a linestring (multiple points) // pnts=[[x0,y0],[x1,y1],[x2,y2],...]
function totalLen(pnts) {
  var tl = 0;
  pnts.forEach(function(point, i, points) {
    tl += i ? lineLen([points[i - 1], point]) : 0;
  });
  return tl;
};
// returns the length of a line (two points) // line=[[x0,y0],[x1,y1]]
function lineLen(line) {
  var xd = line[0][0] - line[1][0];
  var yd = line[0][1] - line[1][1];
  return Math.sqrt(xd * xd + yd * yd);
};

说明

1.我们找到了线串的总长度:

• 函数lineLen()计算单行的长度.
• 函数totalLen()循环遍历行并计算总长度.

*来源和信用在这里(伊戈尔Šarčević)

2.中点距离是总长度/ 2:

• 现在我们有了所需的距离,我们循环通过线并检查这个线 - 起始点和这个线 - 端点的距离,看看它们之间是否有中点距离.

• 一旦我们得到了我们知道我们的中点在的单线,我们计算它与该线 - 起点的距离(总长度 - 线 - 起点距离)

• 现在我们使用这个公式(函数pntOnLine())来查找xt,yt(想要中点)

*积分给Sen Jacob.

可视化

我包含了一个HTML5 canvas来绘制(可视化)线串和中点,你不必包含它们.但如果你想测试代码并实时查看结果,它们就很有用

// Just for visualizing on canvas (not needed)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
drawLine(points);
//
ctx.beginPath();
ctx.arc(midPoint[0], midPoint[1], 2, 0, 2 * Math.PI);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
//
function drawLine(pnts) {
  pnts.forEach(function(point, i, points) {
    if (i === 0) {
      ctx.beginPath();
      ctx.moveTo(point[0], point[1]);
    } else {
      ctx.lineTo(point[0], point[1]);
    }
    if (i === points.length - 1) {
      ctx.stroke();
    }
  });
}