cesium-军事标绘（绘制攻击箭头）

1.实现说明

已知两点坐标如何实现直接在cesium上直接绘制攻击箭头，实现效果如下：

2.代码实现

（1）数据处理

  // (1.1) 绘制
  drawLineGeojson () {
    var geoJsonData = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            'type': 'line',
            'color': 'red'
          },
          "geometry": {
            "coordinates": [
              [
                123.21447173583914,
                28.075488849868364
              ],
              [
                125.01433099580106,
                25.31056828396268
              ]
            ],
            "type": "LineString"
          }
        }
      ]
    }
    for (let index = 0; index < geoJsonData.features.length; index++) {
      const coordinates = geoJsonData.features[index].geometry.coordinates;
      const properties = geoJsonData.features[index].properties;
      if (properties.type == 'line') {
        this.createStraightArrow(coordinates, properties)
      }
    }
  },

（2）箭头绘制

  // (1.2) 绘制直线箭头
  createStraightArrow (coordinates, properties) {
    let material = Cesium.Color.fromCssColorString('#d81e06').withAlpha(0.7);
    if (properties.color == 'red') {
      material = Cesium.Color.fromCssColorString('#d81e06').withAlpha(0.7);
    } else if (properties.color == 'blue') {
      material = Cesium.Color.fromCssColorString('#1296db').withAlpha(0.7);
    } else {
      material = Cesium.Color.fromCssColorString('#67C23A').withAlpha(0.7);
    }
    this.currentViewer.entities.add({
      name: 'polyon',
      polygon: {
        hierarchy: new Cesium.CallbackProperty(
          function () {
            var arrow = [];
            var res = drawLine.fineArrow(coordinates[0], coordinates[1]);
            for (var i = 0; i < res.length; i++) {
              var cart3 = new Cesium.Cartesian3(res[i].x, res[i].y, res[i].z);
              arrow.push(cart3);
            }
            return new Cesium.PolygonHierarchy(arrow);
          }, false),
        show: true,
        fill: true,
        clampToGround: true,
        material: material
      }
    }
    )

  },

（3）引用函数

import DrawLine from './tool/draw/drawLine.js'
const drawLine = new DrawLine();

（4）函数内容

export default class DrawLine{
  fineArrowDefualParam() {
    return {
        tailWidthFactor: 0.15,
        neckWidthFactor: 0.20,
        headWidthFactor: 0.25,
        headAngle: Math.PI / 8.5,
        neckAngle: Math.PI / 13
    }
  }
  fineArrow(tailPoint, headerPoint) {
    var $this = this;
    if ((tailPoint.length < 2) || (headerPoint.length < 2)) return;
    //画箭头的函数
    let tailWidthFactor = $this.fineArrowDefualParam().tailWidthFactor;
    let neckWidthFactor = $this.fineArrowDefualParam().neckWidthFactor;
    let headWidthFactor = $this.fineArrowDefualParam().headWidthFactor;
    let headAngle = $this.fineArrowDefualParam().headAngle;
    let neckAngle = $this.fineArrowDefualParam().neckAngle;
    var o = [];
    o[0] = tailPoint;
    o[1] = headerPoint;
    var e = o[0],
        r = o[1],
        n = $this.getBaseLength(o),
        g = n * tailWidthFactor,
        //尾部宽度因子
        i = n * neckWidthFactor,
        //脖子宽度银子
        s = n * headWidthFactor,
        //头部宽度因子
        a = $this.getThirdPoint(r, e, Math.PI / 2, g, !0),
        l = $this.getThirdPoint(r, e, Math.PI / 2, g, !1),
        u = $this.getThirdPoint(e, r, headAngle, s, !1),
        c = $this.getThirdPoint(e, r, headAngle, s, !0),
        p = $this.getThirdPoint(e, r, neckAngle, i, !1),
        h = $this.getThirdPoint(e, r, neckAngle, i, !0),
        d = [];
    d.push(a[0], a[1], p[0], p[1], u[0], u[1], r[0], r[1], c[0], c[1], h[0], h[1], l[0], l[1], e[0], e[1]);
    return Cesium.Cartesian3.fromDegreesArray(d);
  }
  getBaseLength(t) {
    return Math.pow(this.wholeDistance(t), .99)
  }
  wholeDistance(t) {
    for (var o = 0, e = 0; e < t.length - 1; e++) o += this.distance(t[e], t[e + 1]);
    return o
  }
  distance(t, o) {
    return Math.sqrt(Math.pow(t[0] - o[0], 2) + Math.pow(t[1] - o[1], 2))
  }
  getThirdPoint(t, o, e, r, n) {
      var g = this.getAzimuth(t, o),
          i = n ? g + e : g - e,
          s = r * Math.cos(i),
          a = r * Math.sin(i);
      return [o[0] + s, o[1] + a]
  }
  getAzimuth(t, o) {
      var e, r = Math.asin(Math.abs(o[1] - t[1]) / this.distance(t, o));
      return o[1] >= t[1] && o[0] >= t[0] ? e = r + Math.PI : o[1] >= t[1] && o[0] < t[0] ? e = 2 * Math.PI - r : o[1] < t[1] && o[0] < t[0] ? e = r : o[1] < t[1] && o[0] >= t[0] && (e = Math.PI - r), e
  }
}