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。

在解决此bug过程当中，不经意间看到道路标注都是沿道路线方向，忽然有了新的灵感。

从新查看mapboxgl API，发现将layout中的symbol-placement设置为line，便可实现沿着线的方向绘制箭头。

注意：

1. 我所用图标为右侧方向箭头，结果与实际方向相符，若是图标为向上箭头，需修改icon-rotate为90。
2. 只把symbol-placement设置为line，箭头间距过于稀疏；须要设置下symbol-spacing参数，symbol-spacing默认值为250，修改成50便可实现文章首页图片效果。

在线示例

在线示例：http://gisarmory.xyz/blog/index.html?demo=MapboxGLPolylineDecorator

代码地址：http://gisarmory.xyz/blog/index.html?source=MapboxGLPolylineDecorator

---

原文地址：http://gisarmory.xyz/blog/index.html?blog=MapboxGLPolylineDecorator。

关注《GIS兵器库》公众号， 第一时间得到更多高质量GIS文章。

本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、从新发布，但务必保留文章署名《GIS兵器库》（包含连接：  http://gisarmory.xyz/blog/），不得用于商业目的，基于本文修改后的做品务必以相同的许可发布。