（3）基于Leaflet实现标绘——进攻方向

这个图形是一个略复杂的图形，至少需要三个点才能绘制出来。这个图形分为以下三部分：

箭尾：由绘制的第一个点和第二个点构成。

箭头：由绘制最后一个点、箭尾的中点和其他一些参数计算出来的总共5个点构成。

箭身：由除了箭尾和最后一个点之外的其他点计算得出，其中一个绘制点对应计算出来的两个点，左右依次连接构成。

下图是一个四个点的简易图形（这只是第一步，后面会详细介绍如何圆滑处理拐角部分）。

（图一）左为实际图形，右为简化的图形

计算图形所需要的固定值参数如下

图二

第一步：确定箭尾的顺序。pnts是用于绘制进攻方向的全部点，是经纬度坐标转成平面坐标后的坐标。判断前三个点是否为顺时针方向，若是，则第一个点为trailRight，第二个点为trailLeft；否则，第一个点为trailLeft，第二个点为trailRight。

（图三）确定箭尾顺序的代码

第二步：计算箭头的坐标点。通过trailLeft和trailRight计算箭尾的中点midTail，然后将pnts去掉箭尾的两点并在数组的开头插入midTail得到bonePnts，如下图所示

（图四）获取bonePnts的坐标

（图五）计算箭头的坐标点

计算bonePnts点的连线的长度为len；

len与headHeightFactor的乘积就是headHeight；

pnts（绘制图形所需的点）的最后一个点就是headPnt；

之后的len被赋值为headPnt与其前一个点的距离；

tailWidth为箭尾的宽度；

如果headHeight大于tailWidth*headTailFactor，那么headHeight将被重新复制为tailWidth*headTailFactor;

之后通过headHeight乘以相关的倍数得到headWidth、neckWidth和neckHeight

（图六）箭头的核心算法

headEndPnt就是headPnt沿着前一个点的方向，距离headHeight的点，同理neckEndPnt就是headPnt沿着前一个点的方向，距离headHeight的点；

headLeft和headRight是headEndPnt沿着headPnt的方向，旋转90°后距离headWidth的点；

neckLeft和neckRight是neckEndPnt沿着headPnt的方向，旋转90°后距离neckWidth的点；

最后将neckLeft、headLeft、headPnt、headRight和neckRight顺次放入数组中。

（图七）箭头算法的示意图

第三步：计算箭身的关键点

tailWidthFactor 为箭尾的宽度/bonePnts的长度

（图八）计算箭身的代码

allLen是bonePnts的总长度的0.99次幂，len是bonePnts的总长度；

widthDif是（箭尾的宽度-箭头颈部的宽度）/ 2；

然后从下标为1的点开始循环至倒数第二个点，每次循环计算当前点和前一个点和后一个点组成的角度的一半angle，以及当前的位置相较于tailWidth和neckWidth的宽度w，然后根据当前点的位置、angle和w计算出一组left和right。

（图九）计算箭身点的核心代码

（图十）循环计算得出多组left和right关键点  

得到的箭身的点是左右两侧的点存放于一个数组当中，下图中的代码时将返回的箭身的关键点的左右两侧分开。

（图十一）箭身关键点分为左右两侧

第四步：拐角点的圆滑处理

至此，已经绘制出如图一所示的右侧的简易进攻方向，但相较于左侧的最终效果，拐角处不够圆滑。所以，接下来就是将拐角点变成很多的点，从而形成圆滑的视觉效果。

（图十二）圆滑处理的代码

（图十三）圆滑处理的核心算法一

（图十四）圆滑处理的核心算法二

计算出来的圆滑的点的实际效果如下图

将拐点圆滑处理后的效果图

第五步：将计算出来的所有点顺次连接组成多边形——进攻方向。

顺次连接所有点

2021.10.13 好多人问我要源码，距离发文已经几年过去了~~源码来啦