mapboxgl实现带箭头轨迹线（类高德轨迹效果）

　　最近在使用mapboxgl实现轨迹展示时，想实现类似高德地图导航轨迹效果，然而并未在网上找到类似示例。经一番研究与尝试，最终解决，效果如下。
　　添加箭头核心代码如下，只需在配置layout中添加symbolplacement和symbolspacing属性即可：添加箭头图层functionaddArrowlayer（）｛map。addLayer（｛id：arrowLayer，type：symbol，source：｛type：geojson，data：routeGeoJson轨迹geojson格式数据｝，layout：｛symbolplacement：line，symbolspacing：50，图标间隔，默认为250iconimage：arrowIcon，箭头图标iconsize：0。5｝｝）；｝
　　然而，为实现上述效果，却走了不少弯路。曾尝试集成Leaflet。PolylineDecorator插件核心算法，通过对线的处理，计算每个箭头所在位置以及角度，也能实现上述效果。不过该方案在地图倾斜旋转后，有时会有箭头偏移的bug。
　　在解决此bug过程中，不经意间看到道路标注都是沿道路线方向，突然有了新的灵感。
　　重新查看mapboxglAPI，发现将layout中的symbolplacement设置为line，即可实现沿着线的方向绘制箭头。
　　注意：我所用图标为右侧方向箭头，结果与实际方向相符，如果图标为向上箭头，需修改iconrotate为90。只把symbolplacement设置为line，箭头间距过于稀疏；需要设置下symbolspacing参数，symbolspacing默认值为250，修改为50即可实现文章首页图片效果。在线示例
　　在线示例：http：gisarmory。xyzblogindex。html？demoMapboxGLPolylineDecorator
　　代码地址：http：gisarmory。xyzblogindex。html？sourceMapboxGLPolylineDecorator
　　原文地址：http：gisarmory。xyzblogindex。html？blogMapboxGLPolylineDecorator。
　　关注《GIS兵器库》公众号，第一时间获得更多高质量GIS文章。
　　本文章采用知识共享署名非商业性使用相同方式共享4。0国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名《GIS兵器库》（包含链接：http：gisarmory。xyzblog），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。