mapboxgl实现带箭头轨迹线

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

202012310104

添加箭头核心代码如下,只需在配置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

关注《GIS兵器库》公众号, 第一时间获得更多高质量GIS文章。

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

  • 7
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
在EasyX中,可以使用 `arc` 函数和 `line` 函数来绘制箭头的曲线。 首先,我们可以使用 `arc` 函数绘制一个圆弧,并指定起始角度和终止角度。然后,使用 `line` 函数从圆弧的终点绘制一条直线箭头的位置。最后,再使用 `line` 函数绘制箭头的两个线段即可。 以下是一个示例代码,绘制了一个箭头的曲线: ``` #include <graphics.h> #include <math.h> int main() { initgraph(640, 480); // 绘制圆弧 int cx = 320, cy = 240, r = 100; double startAngle = 30, endAngle = 210; arc(cx, cy, startAngle, endAngle, r); // 计算箭头位置和方向 double arrowAngle = endAngle - M_PI / 6; int arrowX = cx + r * cos(arrowAngle); int arrowY = cy - r * sin(arrowAngle); // 绘制箭头 int arrowSize = 10; int arrowX1 = arrowX - arrowSize * cos(arrowAngle - M_PI / 6); int arrowY1 = arrowY + arrowSize * sin(arrowAngle - M_PI / 6); int arrowX2 = arrowX - arrowSize * cos(arrowAngle + M_PI / 6); int arrowY2 = arrowY + arrowSize * sin(arrowAngle + M_PI / 6); line(arrowX, arrowY, arrowX1, arrowY1); line(arrowX, arrowY, arrowX2, arrowY2); getch(); closegraph(); return 0; } ``` 在这个示例中,我们使用了 `cos` 和 `sin` 函数来计算箭头的位置和方向。其中,`cos` 和 `sin` 函数需要传入弧度值,因此需要将角度值转换为弧度值。在示例中,我们使用了 `M_PI` 常量来表示圆周率,它定义在 `math.h` 头文件中。 运行示例代码,即可看到绘制的箭头的曲线。需要注意的是,由于 `arc` 函数默认绘制的圆弧是逆时针方向的,因此在计算箭头位置和方向时需要进行一些调整。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值