Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.