(5)基于Leaflet实现标绘——分队战斗行动和分队战斗行动(
2019-01-29 本文已影响0人
仙人掌开不了花
分队战斗行动这个图形是由进攻方向继承而来的,最大的不同在于,其父类进攻方向的尾部是由前两个点组成的。而这个图形的箭尾是计算出来的。

其中涉及到的关键点位置如下,该图形是由4个点(黄色方块)计算得出的(红色圆圈)。

构成图形部分的核心代码如下,与进攻方向相比,只有箭尾处的计算方法不同。

计算箭尾的点坐标的代码如下图

allLen是所有点连线的长度,tailWidth是allLen和tailWidthFactor(本图形默认0.1)的乘积。那么,tailLeft和tailRight就是第一个点在第二个点的方向上旋转90°后距离tailWidth距离的点,如下图所示。

若是想要将尾部变成下图所示的燕尾,该如何做呢?

依然是继承进攻方向,实现的具体代码如下,红框中的代码是与分队战斗行动的核心代码不同的地方。

图解如下,其中swallowTailFactor为1
