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这个函数是根据两个点坐标,角度,宽度,计算控制点坐标的
有疑问的可以下面讨论