?mapbox-gl+和turf.js實(shí)現(xiàn)簡(jiǎn)單的箭頭畫法，使用turf.js中現(xiàn)有的算法，計(jì)算角度和位置信息，在mapbox-gl上展示箭頭的效果。

turf.js官網(wǎng)：

http://turfjs.org/getting-started

主要使用turf.js的兩個(gè)接口：rhumbBearing和rhumbDestination。

rhumbBearing是計(jì)算起點(diǎn)到終點(diǎn)的相對(duì)于北向的角度，返回的結(jié)果是度數(shù)；

rhumbDestination是已知一個(gè)點(diǎn)，根據(jù)距離點(diǎn)的距離和相對(duì)于北向的角度，計(jì)算另一個(gè)點(diǎn)的位置；

實(shí)現(xiàn)步驟：

1、在地圖上畫2個(gè)點(diǎn)，連成一條線，并計(jì)算起點(diǎn)到終點(diǎn)的角度；

2、根據(jù)計(jì)算的角度，在線的終點(diǎn)上，計(jì)算一個(gè)和線夾角為30度（可根據(jù)實(shí)際調(diào)整角度），距離為50米新的點(diǎn)位置；

3、根據(jù)計(jì)算的角度，在線的終點(diǎn)上，計(jì)算一個(gè)和線夾角為-30度（可根據(jù)實(shí)際調(diào)整角度），距離為50米新的點(diǎn)位置；

4、根據(jù)2和3的操作，實(shí)現(xiàn)箭頭頭部的效果；

5、將以上的點(diǎn)，兩兩以線的方式連接起來，達(dá)到一個(gè)簡(jiǎn)單箭頭的效果。

簡(jiǎn)單的效果圖：

擴(kuò)展：

根據(jù)上述兩個(gè)方法，也能夠擴(kuò)展畫一些常用的圖形，如方形、三角形等;

畫一些帶寬度、不同的頭部樣式和不同的尾部樣式箭頭，也能夠使用上述兩個(gè)方法配合進(jìn)行實(shí)現(xiàn)，后期時(shí)間寬裕進(jìn)一步介紹。

參考網(wǎng)址：http://turfjs.org/docs/#rhumbDestination