How to implement arrowheads in mapbox-gl+turf.js

Xiaobian to share with you mapbox-gl+ turf.js how to achieve the arrow, I believe most people do not know how, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

Mapbox-gl+ and turf.js implement simple arrow drawing, using existing algorithms in turf.js to calculate angle and position information, and display the effect of arrows on mapbox-gl. turf.js official website:

http://turfjs.org/getting-started uses two main interfaces of turf.js: rhumbBearing and rhumbDestination. rhumbBearing is to calculate the angle from the starting point to the ending point relative to the north direction, and the returned result is degrees;rhumbDestination is to calculate the position of another point according to the distance from the point and the angle relative to the north direction; the implementation steps are as follows: 1. Draw two points on the map, connect them into a line, and calculate the angle from the starting point to the ending point;

2. According to the calculated angle, calculate a new point position with an angle of 30 degrees (adjustable according to actual angle) and a distance of 50 meters at the end of the line;3. According to the calculated angle, calculate a new point position with an angle of-30 degrees (adjustable according to actual angle) and a distance of 50 meters at the end of the line;4. According to the operations of 2 and 3, realize the effect of the arrow head;

5. Connect the above points in pairs in a line to achieve the effect of a simple arrow.

Simple rendering:

The above is "mapbox-gl+ turf.js how to implement the arrow" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!