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

最近在使用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即可实现文章首页图片效果。

在线示例

在线示例：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实现带箭头轨迹线内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • mapboxgl区划标签避让不遮盖实现的代码详解

    Mapbox GL JS是一个JavaScript库,使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图.WebGL渲染意味着高性能,MapboxGL能够渲染大量的地图要素,拥有流畅的交互以及动画效果.可以显示立体地图并且支持移动端,是一款十分优秀的WEB GIS开发框架. 常见的 mapbox.js和mapbox-gl.js的异同点?     相同点: 1.都是由Mapbox公司推出的免费开源的JavaScript库 2.都可以作为前端渲染矢量瓦片交互地图的工具 3.它们的样式设置都支持Map

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

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

    最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例.经一番研究与尝试,最终解决,效果如下. 添加箭头核心代码如下,只需在配置layout中添加symbol-placement和symbol-spacing属性即可: // 添加箭头图层 function addArrowlayer() { map.addLayer({ 'id': 'arrowLayer', 'type': 'symbol', 'source': { 'type': 'geojso

  • 使用Matplotlib绘制不同颜色的带箭头的线实例

    周五的时候计算出来一条线路,但是计算出来的只是类似与 0->10->19->2->..0 这样的线路只有写代码的人才能看的懂无法直观的表达出来,让其它同事看的不清晰,所以考虑怎样直观的把线路图画出来. &esp; 当然是考虑用matplotlib了, 导入相关的库 import matplotlib.pyplot as plt import numpy import matplotlib.colors as colors import matplotlib.cm as cm

  • android自定义带箭头对话框

    本文实例为大家分享了android自定义带箭头对话框的具体代码,供大家参考,具体内容如下 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.support.annotation.Nullabl

  • 使用three.js 绘制三维带箭头线的详细过程

    使用three.js 绘制三维带箭头线的详细过程

    需求:这个需求是个刚需啊!在一个地铁场景里展示逃生路线,这个路线肯定是要有指示箭头的,为了画这个箭头,我花了不少于十几个小时,总算做出来了,但始终有点问题.我对这个箭头的要求是,无论场景拉近还是拉远,这个箭头不能太大,也不能太小看不清,形状不能变化,否则就不像箭头了. 使用到了 three.js 的 Line2.js 和一个开源库MeshLine.js 部分代码: DrawPath.js: /** * 绘制路线 */ import * as THREE from '../build/three.

  • Android 带箭头的指引tipLayout实现示例代码

    Android 带箭头的指引tipLayout实现示例代码

    本文介绍了Android 带箭头的指引tipLayout实现示例代码,分享给大家,具体如下: 如上是从UI接过来的设计图,要求三角形指示器需要动态对齐上面的文本,需要动态的实现对其三角形. 引用方式 compile 'com.xiaowei:TriangleTipLayout:1.0.0' 实现思路 准备一个三角形指引的图片即可. 先上代码 final TextPaint textPaint = mTextView.getPaint(); final int textHeight = (int)

  • WPF制作带小箭头的按钮完整代码

    什么是WPF WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分.它提供了统一的编程模型.语言和框架,真正做到了分离界面设计人员与开发人员的工作:同时它提供了全新的多媒体交互用户图形界面. 在没给大家介绍实现代码之前,先给大家看下效果图,如果大家感觉效果不错,请参考实现代码: XAML代码: <ControlTemplate x:Key="btnTpl" Targ

  • JavaScript实现带箭头标识的多级下拉菜单效果

    JavaScript实现带箭头标识的多级下拉菜单效果

    本文实例讲述了JavaScript实现带箭头标识的多级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个支持多级显示的JS菜单,鼠标移向带有小三角的菜单项,可下拉出二级子菜单项,在该主菜单的上方会显示标记,指引当前的位置,本菜单代码使用了一个JS类,可根据代码地址自行下载,这个菜单未在网上测试,用在自己的网站里可能要修改代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-focus-m-select-menu-nav-codes/

  • Android自定义ViewGroup实现带箭头的圆角矩形菜单

    Android自定义ViewGroup实现带箭头的圆角矩形菜单

    本文和大家一起做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽

  • js实现带箭头的进度流程

    本文实例为大家分享了js实现带箭头进度流程的具体代码,供大家参考,具体内容如下 html <ul class="cssNav"> <li v-for="(item,i) in list" :class="[num==i?'active':'']" @click="tab(i)">{{item}}</li> </ul> css .cssNav { margin: 100px aut

  • JavaScript小技巧带你提升你的代码技能

    目录 1.过滤唯一值 2.短路求值(Short-Circuit Evaluation) 2.1场景举例 3.转换Boolean型 4.转换String型 5.转换Number类型 6.快速求幂 7.快速Float转Integer 7.1使用场景 8.类中自动绑定 9.截取数组 10.获取数组中的最后的元素 11.格式化JSON代码 今天,我将跟大家分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是又很容易被忽略. 1.过滤唯一值 Set类型是在

随机推荐