Mapbox开发：如何在导航方向路线上显示路线方向箭头

你已经掌握数据导入、基础样式配置的话，直接按下面的步骤操作就能做出参考图的效果：

方案1：Symbol图层沿路径渲染（还原度最高，最常用） #

这个方案不需要手动计算箭头角度、位置，Mapbox会自动适配线路走向，和截图效果完全匹配：

• 提前准备16-24px大小、指向正上方的箭头图标（和你的导航线配色一致即可），地图初始化完成后把图标加载到地图实例中：

// 替换成你自己的箭头图标存放路径
map.loadImage('./direction-arrow.png', (err, arrowImg) => {
  if (err) throw err;
  map.addImage('nav-arrow', arrowImg);
});

• 在你已有的导航线路图层上方，新增一个Symbol类型的图层，绑定你存导航路线的同一个数据源，核心配置如下：

map.addLayer({
  id: 'route-direction-arrows',
  type: 'symbol',
  source: 'your-route-source', // 替换成你自己的导航路线source ID
  layout: {
    'symbol-placement': 'line', // 核心配置：让符号沿线路走向自动摆放、旋转
    'symbol-spacing': 100, // 箭头间隔，单位为像素，80-150区间的密度和参考图接近，按需调整
    'icon-image': 'nav-arrow',
    'icon-size': 0.75,
    'icon-allow-overlap': true, // 避免缩放时箭头被自动隐藏
    'icon-ignore-placement': true,
    'icon-offset': [0, -1] // 微调箭头位置，让它刚好压在路线中线上
  }
});

• 调优：如果觉得箭头太扎眼可以调低icon-opacity参数，和路线透明度匹配即可。

方案2：线图案填充（无需额外加载图标资源） #

如果你用的是Mapbox GL JS v2.9以上版本，可以不用自己准备箭头图标，直接用line-pattern属性搭配官方内置的箭头图案，不过配色、大小调整灵活度较低，适合快速出效果的场景。注意用这个方案时要把导航线的line-cap设为butt，避免线路端点位置的图案变形。

常见踩坑说明 #

• 箭头图层一定要放在导航线图层的上方，不然会被线路挡住看不见
• 如果你的路线数据是MultiLineString类型，要先确认所有线段的坐标顺序是沿导航方向顺排的，不然会出现部分路段箭头反向的问题
• 不要手动计算箭头旋转角度，symbol-placement: line配置会自动适配线路走向，手动算反而容易出现角度错位

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