mapboxgl implements a trajectory with an arrow

Recently, when using mapboxgl to realize the track display, I wanted to achieve a navigation track effect similar to the Gaode map, but no similar examples were found on the Internet. After some research and attempts, the final solution is as follows.

The core code for adding arrows is as follows, just layoutadd symbol-placementand symbol-spacingattributes in the configuration :

// 添加箭头图层
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
        }
    });
}

However, in order to achieve the above effects, many detours have been taken. I tried to integrate the Leaflet.PolylineDecoratorcore algorithm of the plug-in. By processing the line, calculating the position and angle of each arrow, the above effect can also be achieved. However, this solution sometimes causes the arrow offset bug after the map is tilted and rotated.

In the process of solving this bug, I inadvertently saw that the road markings were all along the direction of the road line, and suddenly I got new inspiration.

See again mapboxgl API, we found that layoutthe symbol-placementsetting linecan be realized in the direction of the arrow drawn line.

note:

1. The icon I used is the direction arrow on the right , and the result is consistent with the actual direction. If the icon is an upward arrow, it needs to be changed icon-rotateto 90.
2. Just symbol-placementset it to line, the arrow spacing is too sparse; you need to set the next symbol-spacingparameter, the symbol-spacingdefault value is 250, modify it to 50 to achieve the article homepage image effect.

Online example

Online example: http://gisarmory.xyz/blog/index.html?demo=MapboxGLPolylineDecorator

Code address: http://gisarmory.xyz/blog/index.html?source=MapboxGLPolylineDecorator

---

Original address: http://gisarmory.xyz/blog/index.html?blog=MapboxGLPolylineDecorator .

Pay attention to the " GIS Weapon Library " public account and get more high-quality GIS articles in the first time.

This article uses Creative Commons Attribution - NonCommercial - ShareAlike 4.0 International License Agreement for licensing. Welcome to reprint, use, and republish, but be sure to keep the article's signature "GIS Weapon Library" (including link: http://gisarmory.xyz/blog/ ), and it must not be used for commercial purposes. The modified works based on this article must be the same License issuance.