mapboxgl實現(xiàn)帶箭頭軌跡線的代碼
最近在使用mapboxgl實現(xiàn)軌跡展示時，想實現(xiàn)類似高德地圖導航軌跡效果，然而并未在網(wǎng)上找到類似示例。經(jīng)一番研究與嘗試，最終解決，效果如下。
添加箭頭核心代碼如下，只需在配置layout中添加symbol-placement和symbol-spacing屬性即可：
// 添加箭頭圖層
function addArrowlayer() {
map.addLayer({
'id': 'arrowLayer',
'type': 'symbol',
'source': {
'type': 'geojson',
'data': routeGeoJson //軌跡geojson格式數(shù)據(jù)
},
'layout': {
'symbol-placement': 'line',
'symbol-spacing': 50, // 圖標間隔，默認為250
'icon-image': 'arrowIcon', //箭頭圖標
'icon-size': 0.5
}
});
}
然而，為實現(xiàn)上述效果，確走了不少彎路。曾嘗試集成Leaflet.PolylineDecorator插件核心算法，通過對線的處理，計算每個箭頭所在位置以及角度，也能實現(xiàn)上述效果。不過該方案在地圖傾斜旋轉(zhuǎn)后，有時會有箭頭偏移的bug。
在解決此bug過程中，不經(jīng)意間看到道路標注都是沿道路線方向，突然有了新的靈感。
重新查看mapboxgl API，發(fā)現(xiàn)將layout中的symbol-placement設(shè)置為line，即可實現(xiàn)沿著線的方向繪制箭頭。
注意：
1.我所用圖標為右側(cè)方向箭頭，結(jié)果與實際方向相符，如果圖標為向上箭頭，需修改icon-rotate為90。
2.只把symbol-placement設(shè)置為line，箭頭間距過于稀疏；需要設(shè)置下symbol-spacing參數(shù)，symbol-spacing默認值為250，修改為50即可實現(xiàn)文章首頁圖片效果。
在線示例
在線示例：http://gisarmory.xyz/blog/index.html?demo=MapboxGLPolylineDecorator
代碼地址：http://gisarmory.xyz/blog/index.html?source=MapboxGLPolylineDecorator
原文地址：http://gisarmory.xyz/blog/index.html?blog=MapboxGLPolylineDecorator。
到此這篇關(guān)于mapboxgl實現(xiàn)帶箭頭軌跡線的文章就介紹到這了,更多相關(guān)mapboxgl實現(xiàn)帶箭頭軌跡線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
layui實現(xiàn)鼠標移動到單元格上顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇layui實現(xiàn)鼠標移動到單元格上顯示數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
下面小編就為大家?guī)硪黄猨s 判斷一組日期是否是連續(xù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要為大家詳細介紹了微信小程序獲取用戶信息及手機號，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
相信大家也都發(fā)現(xiàn)了，在網(wǎng)上關(guān)于JS的變量和作用域的文章有很多，但真正能講清楚，能深入理解的文章很少。在閱讀了很多人的文章以后，我決定綜合起來，結(jié)合實際代碼，希望能夠以一個比較清楚完整的方式讓大家真正理解。有需要的朋友們下面來一起看看吧。2016-10-10
這篇文章主要介紹了原生js封裝的ajax方法,結(jié)合實例形式分析了JavaScript封裝ajax操作及調(diào)用方法相關(guān)操作技巧,非常簡單實用,需要的朋友可以參考下2018-08-08
JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問題解決方案
這篇文章主要介紹了JS 組件系列之Bootstrap Table 凍結(jié)列功能IE瀏覽器兼容性問題解決方案,需要的朋友可以參考下2017-06-06
Javascript 數(shù)組去重的方法（四種）詳解及實例代碼
這篇文章主要介紹了Javascript 數(shù)組去重的方法（四種）詳解及實例代碼的相關(guān)資料,這里對四種去重方法進行了詳細介紹，并附代碼實例，需要的朋友可以參考下2016-11-11
A標簽觸發(fā)onclick事件而不跳轉(zhuǎn)的多種解決方法
一個標簽僅僅是要觸發(fā)onclick行為，遇到了A標簽觸發(fā)onclick事件時不執(zhí)行跳轉(zhuǎn)，下面與大家分享下四種解決方法，感興趣的朋友可以參考下哈2013-06-06
數(shù)組如何求最大值,想必很多的朋友都不會吧,下面這篇文章主要給大家介紹了關(guān)于使用js求數(shù)組最大值的八種方法具體實現(xiàn)的相關(guān)資料,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JS基于面向?qū)ο髮崿F(xiàn)的放煙花效果,涉及javascript面向?qū)ο蠹夹g(shù)的使用技巧,需要的朋友可以參考下2015-05-05