请选择 进入手机版 | 继续访问电脑版

mapboxgl实现带箭头轨迹线

[复制链接]
甜蜜的负担 发表于 2021-1-1 18:39:33 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
最近在使用mapboxgl实现轨迹展示时,想实现类似高德舆图导航轨迹效果,然而并未在网上找到类似示例。经一番研究与实验,最终解决,效果如下。

添加箭头核心代码如下,只需在设置layout中添加symbol-placement和symbol-spacing属性即可:
  1. // 添加箭头图层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,即可实现沿着线的方向绘制箭头。
注意:

  • 我所用图标为右侧方向箭头,效果与实际方向相符,如果图标为向上箭头,需修改icon-rotate为90。
  • 只把symbol-placement设置为line,箭头间距过于稀疏;需要设置下symbol-spacing参数,symbol-spacing默认值为250,修改为50即可实现文章首页图片效果。
在线示例

在线示例:http://gisarmory.xyz/blog/index.html?demo=MapboxGLPolylineDecorator
代码地址:http://gisarmory.xyz/blog/index.html?source=MapboxGLPolylineDecorator
  原文地址:http://gisarmory.xyz/blog/index.html?blog=MapboxGLPolylineDecorator
关注《GIS武器库》公众号, 第一时间得到更多高质量GIS文章。

本文章接纳 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议举行许可。欢迎转载、使用、重新发布,但务必生存文章署名《GIS武器库》(包罗链接: http://gisarmory.xyz/blog/),不得用于商业目标,基于本文修改后的作品务必以相同的许可发布。

来源:https://blog.csdn.net/gisarmory/article/details/112034622
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )