如何用mapboxgl绘制带箭头轨迹线的长尾词？

本文共计574个文字，预计阅读时间需要3分钟。

最近使用mapboxgl实现轨迹展示功能时，想实现类似高德地图的导航轨迹效果，但网上未找到类似示例。经一番研究尝试，最终成功解决，效果如下。以下添加箭头核心代码，只需在配置中添加箭头即可。

最近在使用mapboxgl实现轨迹展示时，想实现类似高德地图导航轨迹效果，然而并未在网上找到类似示例。经一番研究与尝试，最终解决，效果如下。

添加箭头核心代码如下，只需在配置layout中添加symbol-placement和symbol-spacing属性即可：

// 添加箭头图层 function addArrowlayer() { map.addLayer({ 'id': 'arrowLayer', 'type': 'symbol', 'source': { 'type': 'geojson', 'data': routeGeoJson //轨迹geojson格式数据 }, 'layout': { 'symbol-placement': 'line', 'symbol-spacing': 50, // 图标间隔，默认为250 'icon-image': 'arrowIcon', //箭头图标 'icon-size': 0.5 } }); }

然而，为实现上述效果，确走了不少弯路。曾尝试集成Leaflet.PolylineDecorator插件核心算法，通过对线的处理，计算每个箭头所在位置以及角度，也能实现上述效果。不过该方案在地图倾斜旋转后，有时会有箭头偏移的bug。