从纬度/经度点沿折线获取距离

Question

我在 Google 地图上渲染一条折线，其数据如下所示：

data = [
  {
    distance: 3.45,
    lat: 37.37112776376307,
    lng: -122.13909476995468,
  },
  ...
];

当悬停在折线上时，我可以获得lat/lng 坐标，我想根据这些坐标获得沿线的距离。

我还没有找到使用 Maps API 执行此操作的简单方法。我想要从起点到沿折线任意点的距离；我发现的大多数答案都只是处理两点之间的（最短）距离，而不是沿着预定义的路线。

我的另一个想法是使用 D3（我用来绘制一些相关图表）来平分数据并获取距离。但是，我不知道如何根据两个数据点进行一分为二 (lat+ lng)。

关于如何完成我想做的事情的任何建议？

编辑：在我的数据中，distance 是在给定坐标处行进的累积距离。

Answer 1

您可以使用Turf 库来执行此操作（以及更多操作）。

使用 Turf，您可以将问题分解为几个较小的问题 —

• 找到离光标最近的行的准确位置
• 创建一条从起点到该点的折线
• 测量该折线的长度。

例如，这里有一条从芝加哥到缅因州波特兰的路线，我们想知道它到雪城和波士顿之间的线路附近但不在我们路线上的斯克内克塔迪有多远：

const turf = require('@turf/helpers')
const lineSlice = require('@turf/line-slice')
const pointOnLine = require('@turf/point-on-line')
const lineDistance = require('@turf/line-distance')

var route = turf.lineString([
[-87.627453, 41.853555], // Chicago
[-87.389126, 41.587682], // Gary IN
[-81.674692, 41.420385], // Clevland
[-76.077655, 42.988040], // Syracuse
[-71.066601, 42.323782], // Boston
[-70.277662, 43.627106]  // Portland, ME
]);

var Schenectady = turf.point([-73.899115, 42.815089]); //Schenectady

var snapped = pointOnLine(route, Schenectady, 'miles');
var sliced = lineSlice(route.geometry.coordinates[0], snapped, route);
var length = lineDistance(sliced, 'miles');

console.log(length) // => 736.8317888716095

这与 Google 的 810 英里路线非常吻合，但并非都是直线。

Answer 2

我想我希望 Maps API 有一个类似

的方法

polyLine.computeDistanceBetween(point1, point2);

但事实并非如此。

我最终解决了类似于上面@Mark_M 描述的问题：

1. Find the point on the polyline closest to the hovered point

   function getIndexOfNearestPoint(path, hoveredPoint) {
     let index = -1;
     let minDistance = 1000;
   
     path.forEach((pointOnPath, idx) => {
       const dist = window.google.maps.geometry.spherical.computeDistanceBetween(
         hoveredPoint,
         pointOnPath
       );
   
       if (dist < minDistance){
         minDistance = dist;
         index = idx;
       }
     });
   
     return index;
   }
   

2. 计算折线上两点之间的距离

   function getDistanceAlongPath(path, startIndex, endIndex) {
     let distance = 0;
     for (let ii = startIndex; ii < endIndex; ii++) {
       distance += window.google.maps.geometry.spherical.computeDistanceBetween(
         path[ii],
         path[ii + 1]
       );
     }
     return distance;
   }
   

把它放在一起找到从折线起点到悬停点的累积距离：

polyline.addListener('mousemove', e => {
  const path = polyline.getPath().getArray();
  const hoveredPoint = e.latLng;
  const startIndex = 0;

  const endIndex = getIndexOfNearestPoint(path, hoveredPoint);
  const distance = getDistanceAlongPath(path, startIndex, endIndex);
});

Answer 3

如果您的数据集只是lat/lng 的列表，您可以使用this answer 根据Haversine formula（地球表面的最短距离）计算每个点之间的距离。