如何使用maplibre计算从折线起点到地图上特定点的距离？

Question

我使用

maplibregl

显示带有路径的地图（由折线表示的坐标集）。我想计算从折线起点到用户悬停的任何点的距离，就像这个屏幕截图所示：

我可以使用什么方法来获取鼠标悬停时的折线距离？

这就是我想做的：

map.on('mousemove', 'lineLayerHover', (e) => {
   const lineLayerFeatures = map.queryRenderedFeatures(e.point).filter((feature) => {
      return feature.layer.id === 'lineLayerHover';
   });

   const distanceFromPolylineStart = lineLayerFeatures[0].geometry.distanceFromPolylineStart;

   console.log(distanceFromPolylineStart);
}

Answer 1

感谢Anatolii的回答，这是使用

turf

库的工作解决方案：

const traceLine = turf.lineString(routeCoordinates);
const traceStartPoint = turf.point(routeCoordinates[0]);

map.on('mousemove', 'traceLayerHover', (e) => {

   const hoveredPoint = turf.point(e.lngLat.toArray());

   const traceSliced = turf.lineSlice(traceStartPoint, hoveredPoint, traceLine);
   
const distanceFromStart = turf.length(traceSliced, { units: 'kilometers' });

   console.log("distance from start", distanceFromStart);
});