利用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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。