沿折线每 x 公里获取坐标点

Question

我有一个构成多段线的坐标数组。现在我想在该折线上从起点到终点每 5 公里获得一个 lat/lng 点。 Leaflet js 中是否有一些功能可以做到这一点或以其他方式做到这一点。

谢谢！

Answer 1

如果您想在线上设置标记，您可以使用库 leaflet-distance-marker。

var line = L.polyline(coords, {
    distanceMarkers: {offset: 5000 }
});

Demo

否则查看 code 并复制它。

Answer 2

根据要求，这里解释了如何使用 leaflet geometryutil（从这里开始的 GeoUtil）来做你想做的事。

首先，让我们计算折线的总长度。您可以使用 GeoUtil 和 reduce 函数来执行此操作。

const lengths = GeoUtil.accumulatedLengths(latlngs);
const totalLength = lengths.reduce((a, b) => a + b, 0);

假设 latlngs 是 L.LatLng 个对象的数组，GeoUtil.accumulatedLengths 将 return 这些经纬度之间的距离数组。然后我们将该数组缩减为 reduce 语句中各部分的总和。

接下来，我们根据您想要的间隔（5 公里）和总距离计算出您沿线有多少个点：

const interval = 5000; // 5km
const totalPoints = Math.floor(totalLength / interval);

所以我们将有 totalPoints 个点沿着你的路线。现在我们需要找出每个点沿直线的距离 ratio:

const ratios = [];
for (let i = 0; i <= totalPoints; i++) {
  const ratio = i / totalPoints;
  ratios.push(ratio);
}

所以ratios将是一个介于0和1之间的数字数组，长度与我们期望在线上的点数相同。如果这部分让您感到困惑，请在评论中寻求更多解释。

现在我们有了比率数组，我们可以在 GeoUtil.interpolateOnLine:

中使用它

const points = ratios.map((ratio) =>
  GeoUtil.interpolateOnLine(map, latlngs, ratio)
);

points.forEach((point) => {
  L.marker(point.latLng).addTo(map);
});

points 是 L.LatLng 点的数组，沿直线等间隔排列。我相信这就是您想要实现的目标。

Working codesandbox

**注意：使用 Math.floor 是计算沿线有多少点时获得整数值的关键。这可能让人觉得我们“离开”了最后一点，但除非你的总距离是你的间隔距离的倍数，否则这是让数学起作用的必要条件。

沿折线每 x 公里获取坐标点

Get coordinate point every x kilometers along the polyline

javascript

leaflet

Working codesandbox