溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用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即可實現文章首頁圖片效果。
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
