Cesium标绘工具-平尾箭头具体实现思路

Cesium的标绘工具是一系列工具的合集，博主有时间的时候会一个一个的更新上来，上次分享的是扇形和集结地的实现方法，有需要的小伙伴可以参考之前的博文，今天来说一下箭头的画法，标绘工具里箭头可谓是多种多样，今天由简到难，先介绍平尾直箭头的画法，当然，箭头的绘制逻辑基本是相同的，无非是需要画头部，身体部分和尾巴部分，头部一般又包含了头顶，和颈部坐标，这些部分都是需要通过代码的方式，通过算法实现关键节点的坐标的，好了，话不多说，先看效果：

这里没有的箭头样式是比较简单的，系统可以根据实际需要动态调整

下面介绍实现算法步骤：

（1）鼠标绘制起点和终点，一共两个点

（2）起点用来生成尾部坐标，平尾相对简单，根据起点生成尾部两个角点的坐标即可，生成过程是需要根据终点，也就是箭头的定点的计算的，两个点所在的直线，和起点，垂直方向，分别得到两个点，然后根据起点和终点的长度，指定尾巴的长度是箭头总长度的1/5，或者别的参数，这个参数是个常量，可根据需要任意调节。这样得到了箭头的尾部点

（3）计算箭头的头部点，这里已知顶点就是终点坐标，需要计算箭头最宽的部分的两个点，还需要计算箭头颈部两个点的坐标，根据箭头的长度的比值，可计算箭头最宽处两个点的长度，根据箭头顶部的夹角，这也是一个常量，计算出具体的坐标，颈部依然如此计算出来

（4）根据上面计算出来的几个点，按照顺序连在一起，就构成了箭头的最终图形

（5）需要注意的是Cesium的坐标首先获取的时候笛卡尔坐标，需要计算前转84坐标，再转成平面坐标，控制点计算完毕，需要将平面坐标转84坐标，再转回笛卡尔坐标

整个算法步骤很清晰了，下面就是代码部分了，l

    let [pnt1, pnt2] = [pnts[0], pnts[1]]
                let len = PlotUtils.getBaseLength(pnts)
                let tailWidth = len * $this.tailWidthFactor
                let neckWidth = len * $this.neckWidthFactor
                let headWidth = len * $this.headWidthFactor
                let tailLeft = PlotUtils.getThirdPoint(pnt2, pnt1, Constants.HALF_PI, tailWidth, true)
                let tailRight = PlotUtils.getThirdPoint(pnt2, pnt1, Constants.HALF_PI, tailWidth, false)
                let headLeft = PlotUtils.getThirdPoint(pnt1, pnt2, $this.headAngle, headWidth, false)
                let headRight = PlotUtils.getThirdPoint(pnt1, pnt2, $this.headAngle, headWidth, true)
                let neckLeft = PlotUtils.getThirdPoint(pnt1, pnt2, $this.neckAngle, neckWidth, false)
                let neckRight = PlotUtils.getThirdPoint(pnt1, pnt2, $this.neckAngle, neckWidth, true)
                pList = [tailLeft, neckLeft, headLeft, pnt2, headRight, neckRight, tailRight]

代码也是比较简单的，至于坐标转换部分就省略了

主要是计算各个点的坐标，最后将其连到一起。

getBaseLength 这个函数一看就明白是计算两个点的距离

getThirdPoint这个函数是根据两个点坐标，角度，宽度，计算控制点坐标的

有疑问的可以下面讨论