最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

利用mapboxgl怎么實現(xiàn)一個帶箭頭的軌跡線效果？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

創(chuàng)新互聯(lián)服務項目包括長興網(wǎng)站建設(shè)、長興網(wǎng)站制作、長興網(wǎng)頁制作以及長興網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，長興網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到長興省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

添加箭頭核心代碼如下，只需在配置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)文章首頁圖片效果。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

當前題目：利用mapboxgl怎么實現(xiàn)一個帶箭頭的軌跡線效果-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://fisionsoft.com.cn/article/dcegij.html