（2）基于Leaflet实现标绘——直箭头

各个变量所代表的实际位置

直箭头是有两个点组成的，左下角为起点（pnt1），右上角为终点（pnt2）。那么，这个直箭头是如何来的？其实，这个直箭头就是通过起止两个点计算得到的一个由七个点连成的多边形Polygon，所以，直箭头是继承Polygon的。那么，这七个点是如何计算而来的呢？请继续往下看

核心代码如下（其中pnts是经纬度坐标转成平面坐标后的坐标）：

核心代码

其中options中包含的一些定值如下，用来控制图形的形状

首先，来看一下trailLeft和trailRight是如何计算出来的。这两个点都是通过getThirdPoint这个方法来计算出来的，这个方法的含义是endPt沿着startPnt的方向旋转angle（顺时针或者逆时针）后，距endPt有distance远的点，具体代码如下：

根据起点、终点、角度、距离和是否顺时针计算得出第三点的坐标

那么针对trailLeft这个点来说，就是pnt1沿着pnt2的方向逆时针旋转90度（）的方向上，距离pnt1有trailWidth远的点。反方向上距离pnt2有trailWidth远的点就是trailRight。

第二步，计算headLeft和headRight的坐标。也是调用的getThirdPoint这个方法计算出来的。

headLeft就是pnt2沿着pnt1的方向然后顺时针旋转headAngle也就是度（）上，距离pnt2有headWidth远的点。反方向上距离pnt2有headWidth远的点就是headRight。

第三步，计算neckLeft和neckRight的坐标。也是调用的getThirdPoint这个方法计算出来的。

neckLeft就是pnt2沿着pnt1的方向然后顺时针旋转neckAngle也就是度（），距离pnt2有neckWidth远的点。反方向上距离pnt2有neckWidth远的点就是neckRight。

最后一步，将tailLeft, neckLeft, headLeft, pnt2, headRight, neckRight, tailRight依次连接闭合形成直箭头。

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

参考文档：

基于OpenLayers3实现标绘API