mapboxgl实现带箭头轨迹线的代码


Posted in Javascript onJanuary 04, 2021

最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例。经一番研究与尝试,最终解决,效果如下。

mapboxgl实现带箭头轨迹线的代码

添加箭头核心代码如下,只需在配置layout中添加symbol-placementsymbol-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即可实现文章首页图片效果。

在线示例

在线示例:http://gisarmory.xyz/blog/index.html?demo=MapboxGLPolylineDecorator

代码地址:http://gisarmory.xyz/blog/index.html?source=MapboxGLPolylineDecorator

原文地址:http://gisarmory.xyz/blog/index.html?blog=MapboxGLPolylineDecorator。

到此这篇关于mapboxgl实现带箭头轨迹线的文章就介绍到这了,更多相关mapboxgl实现带箭头轨迹线内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
node.js基础知识汇总
Aug 25 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 #Vue.js
vue3弹出层V3Popup实例详解
Jan 04 #Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 #Vue.js
three.js显示中文字体与tween应用详析
Jan 04 #Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 #Javascript
vue中父子组件的参数传递和应用示例
Jan 04 #Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 #Vue.js
You might like
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jQuery事件用法详解
2016/10/06 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
python 模拟登陆github的示例
2020/12/04 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
兴趣小组活动总结
2014/05/05 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
园林技术专业求职信
2014/07/28 职场文书
学习十八大的心得体会
2014/09/12 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL