欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

mapboxgl實(shí)現(xiàn)帶箭頭軌跡線的代碼

 更新時(shí)間：2021年01月04日 16:17:30   作者：GIS兵器庫  
這篇文章主要介紹了mapboxgl實(shí)現(xiàn)帶箭頭軌跡線的代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近在使用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)上述效果，確走了不少彎路。曾嘗試集成Leaflet.PolylineDecorator插件核心算法，通過對線的處理，計(jì)算每個(gè)箭頭所在位置以及角度，也能實(shí)現(xiàn)上述效果。不過該方案在地圖傾斜旋轉(zhuǎn)后，有時(shí)會有箭頭偏移的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)文章首頁圖片效果。

在線示例

在線示例：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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論