Leaflet使用polyline绘制路由路径与实际不符如何解决

你遇到的路径和实际道路不匹配问题，按以下优先级排查修复即可：

• 修正坐标传入顺序
  Leaflet 所有地理相关API要求的坐标格式为[纬度, 经度]（即[lat, lon]），但你对接的路由接口返回的start_location字段是[经度, 纬度]（[lon, lat]）顺序，直接传入会导致坐标位置完全错误。
  注意不要只手动调整4个step起止点的顺序，解码每一段polyline字符串时，必须把解码输出的坐标统一调整为[lat, lon]顺序，再传给Leaflet使用。
• 匹配polyline解码精度
  编码Polyline有5位、6位两种常用精度：6位精度编码时坐标值乘以1e6，5位精度乘以1e5，解码时参数传错会导致坐标整体偏移10倍。
  你当前返回的polyline是标准6位精度编码，解码时精度参数必须传6，解码完成后可以核对点位：总长度200米左右，点位集中在北纬31.33、东经48.63的转盘区域即为正确。
• 校验瓦片坐标系一致性
  确认你使用的第三方PNG瓦片坐标系和路由坐标系统一：Leaflet默认使用WGS84（EPSG:3857 Web墨卡托）坐标系，如果瓦片是国内常用的GCJ02火星坐标系、BD09百度坐标系，路由返回的原始WGS84坐标会和瓦片底图存在固定偏移，这种情况需要把所有路由坐标做对应坐标系的偏移转换后再绘制。
• 使用完整路径点绘制
  不要只连接4个step的起止点来画线，每个step下的polyline字段存储了该段路径的全部形状点（包含转盘转弯的圆弧节点），需要把所有step解码后的点位按顺序拼接成完整坐标数组，再传入L.polyline绘制，才能还原路径的真实形状。

参考实现代码：

// 以polyline解码库为例
const polyline = require('@mapbox/polyline');
const routeData = /* 接口返回的路由JSON数据 */;
const fullPath = [];

routeData.routes[0].legs[0].steps.forEach(step => {
  // 6位精度解码，输出[lat, lon]顺序直接匹配Leaflet要求
  const segmentPoints = polyline.decode(step.polyline, 6);
  fullPath.push(...segmentPoints);
});

// 渲染路径图层
L.polyline(fullPath, {
  color: '#2389ff',
  weight: 5,
  opacity: 0.9
}).addTo(map);

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