mapboxgl實(shí)現(xiàn)帶箭頭軌跡線的代碼
最近在使用mapboxgl實(shí)現(xiàn)軌跡展示時(shí)，想實(shí)現(xiàn)類似高德地圖導(dǎo)航軌跡效果，然而并未在網(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, // 圖標(biāo)間隔，默認(rèn)為250
'icon-image': 'arrowIcon', //箭頭圖標(biāo)
'icon-size': 0.5
}
});
}
然而，為實(shí)現(xiàn)上述效果，確走了不少?gòu)澛?。曾嘗試集成Leaflet.PolylineDecorator插件核心算法，通過對(duì)線的處理，計(jì)算每個(gè)箭頭所在位置以及角度，也能實(shí)現(xiàn)上述效果。不過該方案在地圖傾斜旋轉(zhuǎn)后，有時(shí)會(huì)有箭頭偏移的bug。
在解決此bug過程中，不經(jīng)意間看到道路標(biāo)注都是沿道路線方向，突然有了新的靈感。
重新查看mapboxgl API，發(fā)現(xiàn)將layout中的symbol-placement設(shè)置為line，即可實(shí)現(xiàn)沿著線的方向繪制箭頭。
注意：
1.我所用圖標(biāo)為右側(cè)方向箭頭，結(jié)果與實(shí)際方向相符，如果圖標(biāo)為向上箭頭，需修改icon-rotate為90。
2.只把symbol-placement設(shè)置為line，箭頭間距過于稀疏；需要設(shè)置下symbol-spacing參數(shù)，symbol-spacing默認(rèn)值為250，修改為50即可實(shí)現(xiàn)文章首頁(yè)圖片效果。
在線示例
在線示例：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實(shí)現(xiàn)帶箭頭軌跡線的文章就介紹到這了,更多相關(guān)mapboxgl實(shí)現(xiàn)帶箭頭軌跡線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript 獲取iframe里頁(yè)面中元素值的方法
本篇文章主要是對(duì)javascript獲取iframe里頁(yè)面中元素值的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
下面小編就為大家?guī)硪黄褂肧VG基本操作API的實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue.config.js是一個(gè)可選的配置文件,可以在其中定義一些自定義的配置選項(xiàng),本文就來介紹一下如何配置,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了JS比較2個(gè)日期間隔的方法,需要的朋友可以參考下2014-04-04
對(duì)于JavaScript數(shù)組去除重復(fù)項(xiàng)，現(xiàn)在有多種方法，其中一種是hash，本文主要對(duì)hash方法去除js數(shù)組重復(fù)項(xiàng)進(jìn)行介紹，下面就跟小編一起來看下吧2016-12-12
JavaScript實(shí)現(xiàn)將網(wǎng)頁(yè)加入收藏夾功能
瀏覽器出于安全和隱私的考慮,限制了用代碼將網(wǎng)頁(yè)加入瀏覽器的收藏夾,本文主要介紹了如何使用通過一些間接的方法實(shí)現(xiàn)這一功能,有需要的可以參考下2024-10-10
js實(shí)現(xiàn)表單提交后不重新刷新當(dāng)前頁(yè)面
本文介紹了如何通過js實(shí)現(xiàn)表單提交后不重新刷新當(dāng)前頁(yè)面的方法實(shí)例.既提交了FORM保存了數(shù)據(jù),頁(yè)面也不會(huì)跳轉(zhuǎn)，很實(shí)用。需要的朋友可以參考下2016-11-11
js實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置
本文主要介紹了利用javascript實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置的具體方法，具有很好的參考作用，需要的朋友可以看看2016-12-12
sort()方法主要是用于對(duì)數(shù)組進(jìn)行排序，默認(rèn)情況下該方法是將數(shù)組元素轉(zhuǎn)換成字符串，然后按照ASC碼進(jìn)行排序，這個(gè)大家都能理解，但如果數(shù)組元素是一個(gè)Object呢，轉(zhuǎn)不了字符串，難道不能進(jìn)行排序？答案當(dāng)然是否定的,那么我們就來詳細(xì)探討下sort()方法的使用2015-08-08
使用js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的滾動(dòng)條過程解析
這篇文章主要介紹了使用js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的滾動(dòng)條過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09