Mapbox GL中仅通过经纬度与长度绘制贴合道路的曲线是否可行

仅已知GPS坐标和对象长度可以实现贴合道路/轨道走向的曲线绘制，核心逻辑是通过GPS坐标匹配对应轨道的矢量线要素，再从匹配点沿轨道截取对应长度的线段作为渲染路径，具体实现如下：

实现核心步骤 #

• 第一步：调用Mapbox API查询GPS点周边的轨道矢量要素，可通过queryRenderedFeatures方法查询小范围buffer内的rail类型要素，避免匹配到其他无关轨道。
• 第二步：将火车GPS坐标吸附到匹配到的轨道线要素上，得到点在线上的相对位置百分比以及轨道线的总长度。
• 第三步：按火车长度截取线段，以匹配点为中心，向轨道的前后两个方向各偏移长度/2的距离，截取中间的线段即为贴合轨道走向的火车形状。
• 第四步：将截取得到的线段作为GeoJSON数据源添加到地图中，用line图层自定义样式渲染即可。

关键代码示例 #

1. 查询周边轨道要素 #

// 火车原始坐标转换为Mapbox支持的LngLat格式
const trainLngLat = [trainData.gps.long, trainData.gps.lat]
// 查询当前视图下目标坐标周边5像素范围内的轨道要素
const railFeatures = map.queryRenderedFeatures(
  map.project(trainLngLat), // 经纬度坐标转屏幕像素坐标
  { layers: ['rail'] } // 替换为你所用底图中轨道图层的实际ID
)

2. 轨道线截取逻辑（可借助turf.js实现） #

import nearestPointOnLine from '@turf/nearest-point-on-line'
import lineSliceAlong from '@turf/line-slice-along'

// 取匹配度最高的第一条轨道
const railLine = railFeatures[0]
const trainPoint = turf.point(trainLngLat)
// 获取GPS点在轨道线上的吸附位置
const snappedPoint = nearestPointOnLine(railLine, trainPoint)
const lineLength = turf.length(railLine, {units: 'meters'})
const offset = trainData.length / 2
// 计算截取的起止位置，增加边界判断避免超出轨道线范围
const startDist = Math.max(0, snappedPoint.properties.location - offset)
const endDist = Math.min(lineLength, snappedPoint.properties.location + offset)
// 生成贴合轨道的火车线段
const trainLine = lineSliceAlong(railLine, startDist, endDist, {units: 'meters'})

注意事项 #

• 若查询到多条并行轨道，可结合火车行驶方向的附加数据做进一步匹配筛选，提升准确性。
• 离线使用场景下需要提前把轨道矢量数据本地化，再执行匹配、截取操作。
• 渲染时可给line图层添加line-cap: round属性，让火车头尾样式更自然。

内容的提问来源于stack exchange，提问作者tony