GIS开发：胖箭头的画法

Cesium开发：简单箭头画法

mapbox-gl+turf.js简单箭头画法

之前分享过在两类地图上的箭头画法，效果是单线，顶部加了箭头的效果，这里分享一下在地图上胖箭头的画法。

胖箭头是在箭头的首尾两点上，横向进行了扩充，最后以面状图层的形式画出来。

胖箭头根据首尾两点生成面的方式：

--将首尾两点连接成直线，计算直线在地图中的北方向夹角，可以使用turf.js进行计算；

--计算和首尾直线垂直的6个点，分别是箭头尾部的两个点和箭头头部的4个样式点，turf.js中有方法计算这6个点，可以参见文章开始的简单箭头中的方法；

--将以上的6个点按照顺序连接起来，形成面状的效果，就能在地图上达到以下的胖箭头形状；

--在尾部的附近取一个点，重新进行面的连接，就能够实现箭头的燕尾效果，参见下图绿色线的效果；

---

地图上标绘效果，都能按照一定的算法进行计算，只不过按照经纬度的单位，需要进行一定的转换，使用一些开源的类库，能够解决不少问题。

本文分享自微信公众号 - 技术几句杂谈（tecsimplepoint）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

来源：oschina

链接：https://my.oschina.net/u/4599572/blog/4702990