关于javascript: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/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。