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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
javascript常用的方法整理
Aug 20 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue+element实现打印页面功能
May 20 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
vue.js购物车添加商品组件的方法
Sep 17 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php中AES加密解密的例子小结
2014/02/18 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
使用Python生成url短链接的方法
2015/05/04 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
python中format()函数的简单使用教程
2018/03/14 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
运动会加油稿20字
2014/11/15 职场文书
Python中的 enumerate和zip详情
2022/05/30 Python