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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 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
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
如何用js控制css中的float的代码
2007/08/16 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
Python内建数据结构详解
2016/02/03 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Python如何读取、写入JSON数据
2020/07/28 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
linux面试题参考答案(7)
2012/10/29 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
作文评语集锦
2014/12/25 职场文书
婚育证明样本
2015/06/16 职场文书
主婚人致辞精选
2015/07/28 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
如何通过一篇文章了解Python中的生成器
2022/04/02 Python