@go-home-early/go-home-early98 0.3.1 → 0.3.3

package/src/packages/Cesium/DrawMap/DrawJs/CreatePolygonOnGround.js

@@ -0,0 +1,202 @@
+/*
+ * 创建贴地多边形
+ * @Author: Wang jianLei
+ * @Date: 2022-04-17 22:49:57
+ * @Last Modified by: 宋木桐
+ * @Last Modified time: 2024-08-20 11:20:28
+ */
+import CreateRemindertip from "./ReminderTip";
+const Cesium = window.Cesium;
+/**
+ * 创建贴地多边形
+ * @param {object} viewer viewer
+ * @param {Array} resultList
+ * @param {{id:String,color:object,outlineColor:object,outlineWidth:number}} options {id，填充颜色，轮廓线颜色，轮廓线宽度}
+ * @param {Function} callback 携带创建的多边形对象
+ */
+const CreatePolygonOnGround = function (viewer, resultList, options, callback) {
+  if (!viewer) throw new Error("no viewer object!");
+  options = options || {};
+  let id = options.id || setSessionid(); //Polygon的id
+  if (viewer.entities.getById(id))
+    throw new Error("the id parameter is an unique value");
+  let color = options.color || Cesium.Color.RED; //Polygon的填充色
+  let outlineColor = options.outlineColor || color.withAlpha(1); //Polygon的轮廓线颜色
+  let outlineWidth = options.outlineWidth || 2; //Polygon的轮廓线宽度
+  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+  let toolTip = "左键点击开始绘制";
+  let anchorpoints = [];
+  let polygon = undefined;
+  let drawStatus = true;
+  handler.setInputAction(function (event) {
+    let pixPos = event.position;
+    let cartesian = getCatesian3FromPX(viewer, pixPos);
+    if (anchorpoints.length == 0) {
+      toolTip = "左键添加第二个点";
+      anchorpoints.push(cartesian);
+      let linePoints = new Cesium.CallbackProperty(function () {
+        let verPoints = anchorpoints.concat([anchorpoints[0]]);
+        return verPoints;
+      }, false);
+      let dynamicPositions = new Cesium.CallbackProperty(function () {
+        return new Cesium.PolygonHierarchy(anchorpoints);
+      }, false);
+      polygon = viewer.entities.add({
+        name: "Polygon",
+        id: id,
+        polyline: {
+          positions: linePoints,
+          width: outlineWidth,
+          material: outlineColor,
+          clampToGround: true,
+        },
+        polygon: {
+          heightReference: Cesium.HeightReference.None,
+          hierarchy: dynamicPositions,
+          material: color,
+        },
+      });
+      polygon.GeoType = "Polygon";
+    } else {
+      toolTip = "左键添加点，Ctrl+Z回退，右键完成绘制";
+    }
+    anchorpoints.push(cartesian);
+  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  handler.setInputAction(function (movement) {
+    let endPos = movement.endPosition;
+    CreateRemindertip(toolTip, endPos, true);
+    if (Cesium.defined(polygon)) {
+      anchorpoints.pop();
+      let cartesian = getCatesian3FromPX(viewer, endPos);
+      anchorpoints.push(cartesian);
+    }
+    if (anchorpoints.length === 3) {
+      polygon.polygon.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
+    }
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  handler.setInputAction(function (event) {
+    anchorpoints.pop();
+    polygon.pottingPoint = anchorpoints;
+    resultList.push(polygon);
+    handler.destroy();
+    CreateRemindertip(toolTip, event.position, false);
+    drawStatus = false;
+    if (typeof callback == "function") callback(polygon);
+  }, Cesium.ScreenSpaceEventType.RIGHT_DOWN);
+  //Ctrl + Z回退
+  document.onkeydown = function (event) {
+    if (event.ctrlKey && window.event.keyCode == 90) {
+      if (!drawStatus) {
+        return false;
+      }
+      anchorpoints.pop();
+      if (anchorpoints.length == 2) {
+        toolTip = "左键添加第二个点";
+      }
+    }
+  };
+};
+function getCatesian3FromPX(viewer, px) {
+  let picks = viewer.scene.drillPick(px);
+  let cartesian = null;
+  let isOn3dtiles = false,
+    isOnTerrain = false;
+  // drillPick
+  for (let i in picks) {
+    let pick = picks[i];
+    if (
+      (pick && pick.primitive instanceof Cesium.Cesium3DTileFeature) ||
+      (pick && pick.primitive instanceof Cesium.Cesium3DTileset) ||
+      (pick && pick.primitive instanceof Cesium.Model)
+    ) {
+      //模型上拾取
+      isOn3dtiles = true;
+    }
+    // 3dtilset
+    if (isOn3dtiles) {
+      viewer.scene.pick(px);
+      cartesian = viewer.scene.pickPosition(px);
+      if (cartesian) {
+        let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        if (cartographic.height < 0) cartographic.height = 0;
+        let lon = Cesium.Math.toDegrees(cartographic.longitude),
+          lat = Cesium.Math.toDegrees(cartographic.latitude),
+          height = cartographic.height;
+        cartesian = transformWGS84ToCartesian(viewer, {
+          lng: lon,
+          lat: lat,
+          alt: height,
+        });
+      }
+    }
+  }
+  // 地形
+  let boolTerrain =
+    viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider;
+  // console.log(`output->boolTerrain---------`, boolTerrain);
+  // console.log(`output->isOn3dtiles---------`, isOn3dtiles);
+  // Terrain
+  if (!isOn3dtiles && !boolTerrain) {
+    let ray = viewer.scene.camera.getPickRay(px);
+    if (!ray) return null;
+    cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+    isOnTerrain = true;
+  }
+  // 地球
+  if (!isOn3dtiles && !isOnTerrain && boolTerrain) {
+    cartesian = viewer.scene.camera.pickEllipsoid(
+      px,
+      viewer.scene.globe.ellipsoid
+    );
+  }
+  if (cartesian) {
+    let position = transformCartesianToWGS84(viewer, cartesian);
+    if (position.alt < 0) {
+      cartesian = transformWGS84ToCartesian(viewer, position, 0.1);
+    }
+    return cartesian;
+  }
+  return false;
+}
+
+/***
+ * 坐标转换 84转笛卡尔
+ * @param {Object} {lng,lat,alt} 地理坐标
+ * @return {Object} Cartesian3 三维位置坐标
+ */
+function transformWGS84ToCartesian(viewer, position, alt) {
+  return position
+    ? Cesium.Cartesian3.fromDegrees(
+        position.lng || position.lon,
+        position.lat,
+        (position.alt = alt || position.alt),
+        Cesium.Ellipsoid.WGS84
+      )
+    : Cesium.Cartesian3.ZERO;
+}
+
+/***
+ * 坐标转换 笛卡尔转84
+ * @param {Object} Cartesian3 三维位置坐标
+ * @return {Object} {lng,lat,alt} 地理坐标
+ */
+function transformCartesianToWGS84(viewer, cartesian) {
+  let ellipsoid = Cesium.Ellipsoid.WGS84;
+  let cartographic = ellipsoid.cartesianToCartographic(cartesian);
+  return {
+    lng: Cesium.Math.toDegrees(cartographic.longitude),
+    lat: Cesium.Math.toDegrees(cartographic.latitude),
+    alt: cartographic.height,
+  };
+}
+function setSessionid(num) {
+  let len = num || 32;
+  let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
+  let maxPos = chars.length;
+  let pwd = "";
+  for (let i = 0; i < len; i++) {
+    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return pwd;
+}
+export default CreatePolygonOnGround;

package/src/packages/Cesium/DrawMap/DrawJs/DrawAttackArrow.js

@@ -0,0 +1,477 @@
+// DrawAttackArrow
+/*
+绘制分队箭头
+ */
+class DrawAttackArrow {
+  constructor(arg) {
+    // 设置唯一id 备用
+    this.objId = Number(
+      new Date().getTime() + '' + Number(Math.random() * 1000).toFixed(0)
+    );
+    this.drawName = 'DrawAttackArrow';
+    this.viewer = arg.viewer;
+    this.Cesium = arg.Cesium;
+    this.Text = arg.data.text || '';
+    this.Color = arg.data.color || '#000';
+    this.imgUrl = arg.data.imgUrl || '';
+    this.FontSize = arg.data.fontSize || 16;
+    this.callback = arg.data.callback || null;
+    this.handler = null;
+    this.floatingPoint = null; // 标识点
+    this._AttackArrow = null; // 活动箭头
+    this._AttackArrowLast = null; // 最后一个箭头
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_AttackArrow = []; // 脏数据+
+    this._AttackArrowData = null; // 用于构造箭头数据
+  }
+
+  // 返回箭头
+  get AttackArrow() {
+    return this._AttackArrowLast;
+  }
+
+  // 修改样式
+  updateStyleFunction(data) {
+    this.Text = data.text || '';
+    this.Color = data.color || '#000';
+    this.imgUrl = data.imgUrl || '';
+    this.FontSize = data.fontSize || 16;
+    this.callback = data.callback || null;
+  }
+
+  // 返回箭头数据用于加载箭头
+  getData() {
+    return this._AttackArrowData;
+  }
+
+  // 加载箭头
+  loadAttackArrow(data) {
+    var $this = this;
+    if (data.length < 3) {
+      return null;
+    }
+    var lnglatArr = [];
+    for (let i = 0; i < data.length; i++) {
+      var lnglat = $this.cartesianToLatlng(data[i]);
+      lnglatArr.push(lnglat);
+    }
+    for (let i = 0; i < this._entities_point.length; i++) {
+      this.viewer.entities.remove(this._entities_point[i]);
+    }
+    var res = $this.fineArrow(lnglatArr);
+    var returnData = res.polygonalPoint;
+    var arrowEntity = $this.viewer.entities.add({
+      polygon: {
+        hierarchy: new $this.Cesium.PolygonHierarchy(returnData),
+        show: true,
+        fill: true,
+        clampToGround: true,
+        material: $this.Cesium.Color.fromCssColorString($this.Color)
+      }
+    });
+    return arrowEntity;
+  }
+
+  // 开始创建
+  startCreate() {
+    var $this = this;
+    this.handler = new this.Cesium.ScreenSpaceEventHandler(
+      this.viewer.scene.canvas
+    );
+
+    this.handler.setInputAction(function(evt) {
+      // 单机开始绘制
+      // 屏幕坐标转地形上坐标
+      var cartesian = $this.getCatesian3FromPX(evt.position);
+      if ($this._positions.length == 0) {
+        // $this._positions.push(cartesian.clone());
+        $this.floatingPoint = $this.createPoint(cartesian);
+        $this.createPoint(cartesian); // 绘制点
+      }
+      if ($this._positions.length == 1) {
+        $this._positions.push(cartesian.clone());
+        $this.createPoint(cartesian); // 绘制点
+      }
+      $this._positions.push(cartesian);
+    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+    this.handler.setInputAction(function(evt) {
+      // 移动时绘制面
+      if ($this._positions.length < 3) return;
+      var cartesian = $this.getCatesian3FromPX(evt.endPosition);
+      if (!$this.Cesium.defined($this._AttackArrow)) {
+        $this._AttackArrow = $this.createAttackArrow();
+      }
+      $this.floatingPoint.position.setValue(cartesian);
+      if ($this._AttackArrow) {
+        // 因为有时候获取移动的点会出现undefined导致报错，所以在这里控制住
+        if (cartesian.x && cartesian.y && cartesian.z) {
+          $this._positions.pop();
+          $this._positions.push(cartesian);
+        }
+      }
+    }, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+    this.handler.setInputAction(function(evt) {
+      if (!$this._AttackArrow) return;
+      var cartesian = $this.getCatesian3FromPX(evt.position);
+      $this._positions.pop();
+      $this._positions.push(cartesian);
+      $this._AttackArrowData = $this._positions.concat();
+      $this.viewer.entities.remove($this._AttackArrow); // 移除
+      $this._AttackArrow = null;
+      $this._positions = [];
+      $this.floatingPoint.position.setValue(cartesian);
+      var straightArrow = $this.loadAttackArrow($this._AttackArrowData); // 加载
+      $this._entities_AttackArrow.push(straightArrow);
+      $this._AttackArrowLast = straightArrow;
+      $this.clearPoint();
+      if (typeof $this.callback == 'function') {
+        // 提取多边形层次结构
+        var hierarchy = straightArrow.polygon.hierarchy.getValue();
+
+        // 从层次结构中提取坐标
+        var coordinates = hierarchy.positions.map(function(position) {
+          var cartographic = $this.Cesium.Cartographic.fromCartesian(position);
+          return [
+            $this.Cesium.Math.toDegrees(cartographic.longitude),
+            $this.Cesium.Math.toDegrees(cartographic.latitude)
+          ];
+        });
+
+        // 创建GeoJSON对象
+        var geojson = {
+          type: 'Polygon',
+          coordinates: [coordinates],
+          geometry: {
+            type: 'Polygon'
+          },
+          properties: {
+            color: $this.Color
+          }
+        };
+
+        $this.callback(geojson);
+      }
+      // $this.handler.destroy();
+    }, $this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+  }
+
+  // 创建攻击箭头
+  createAttackArrow() {
+    var $this = this;
+    var arrowEntity = $this.viewer.entities.add({
+      polygon: {
+        hierarchy: new $this.Cesium.CallbackProperty(function() {
+          // 计算面
+          var lnglatArr = [];
+          for (var i = 0; i < $this._positions.length; i++) {
+            if (i > 0 && $this._positions[i] === $this._positions[i - 1]) {
+              continue;
+            }
+            var lnglat = $this.cartesianToLatlng($this._positions[i]);
+            lnglatArr.push(lnglat);
+          }
+          var res = $this.fineArrow(lnglatArr);
+          var returnData = res.polygonalPoint;
+          return new $this.Cesium.PolygonHierarchy(returnData);
+        }, false),
+        show: true,
+        fill: true,
+        clampToGround: true,
+        material:
+          $this.Cesium.Color.fromCssColorString('#ffffff').withAlpha(0.5)
+      }
+    });
+    $this._entities_AttackArrow.push(arrowEntity);
+    return arrowEntity;
+  }
+
+  // 创建点
+  createPoint(cartesian) {
+    var $this = this;
+    var point = this.viewer.entities.add({
+      position: cartesian,
+      point: {
+        pixelSize: 10,
+        color: $this.Cesium.Color.YELLOW
+      }
+    });
+    point.objId = this.objId;
+    $this._entities_point.push(point);
+    return point;
+  }
+
+  cartesianToLatlng(cartesian) {
+    var latlng =
+      this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
+    var lat = this.Cesium.Math.toDegrees(latlng.latitude);
+    var lng = this.Cesium.Math.toDegrees(latlng.longitude);
+    return [lng, lat];
+  }
+
+  // 销毁
+  destroy() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  clearPoint() {
+    for (var i = 0; i < this._entities_point.length; i++) {
+      this.viewer.entities.remove(this._entities_point[i]);
+    }
+    this._entities_point = []; // 脏数据
+  }
+
+  // 清空实体对象
+  clear() {
+    for (let i = 0; i < this._entities_point.length; i++) {
+      this.viewer.entities.remove(this._entities_point[i]);
+    }
+    for (let i = 0; i < this._entities_AttackArrow.length; i++) {
+      this.viewer.entities.remove(this._entities_AttackArrow[i]);
+    }
+
+    this.floatingPoint = null; // 标识点
+    this._AttackArrow = null; // 活动箭头
+    this._AttackArrowLast = null; // 最后一个箭头
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_AttackArrow = []; // 脏数据
+    this._AttackArrowData = null; // 用于构造箭头数据
+  }
+
+  getCatesian3FromPX(px) {
+    var cartesian;
+    var ray = this.viewer.camera.getPickRay(px);
+    if (!ray) return null;
+    cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
+    return cartesian;
+  }
+
+  // //////////////////////////////////////求取箭头坐标函数/////////////////////////////////////////////////////
+  // 箭头配置函数
+  fineArrowDefualParam() {
+    return {
+      headHeightFactor: 0.18,
+      headWidthFactor: 0.3,
+      neckHeightFactor: 0.85,
+      neckWidthFactor: 0.15,
+      tailWidthFactor: 0.1,
+      headTailFactor: 0.8,
+      swallowTailFactor: 1
+    };
+  }
+
+  fineArrow(inputPoint) {
+    var $this = this;
+    inputPoint = $this.dereplication(inputPoint);
+    const tailWidthFactor = $this.fineArrowDefualParam().tailWidthFactor;
+    const swallowTailFactor = $this.fineArrowDefualParam().swallowTailFactor;
+    let swallowTailPnt = $this.fineArrowDefualParam().swallowTailPnt;
+    // 控制点
+    var result = {
+      controlPoint: null,
+      polygonalPoint: null
+    };
+    result.controlPoint = inputPoint;
+    var t = inputPoint.length;
+    if (!(t < 2)) {
+      if (inputPoint.length == 2) {
+        result.polygonalPoint = inputPoint;
+        return result;
+      }
+      var o = inputPoint;
+      var e = o[0];
+      var r = o[1];
+      $this.isClockWise(o[0], o[1], o[2]) && ((e = o[1]), (r = o[0]));
+      var n = $this.mid(e, r);
+      var g = [n].concat(o.slice(2));
+      var i = $this.getAttackArrowHeadPoints(
+        g,
+        e,
+        r,
+        $this.fineArrowDefualParam()
+      );
+      var s = i[0];
+      var a = i[4];
+      var l = $this.distance(e, r);
+      var u = $this.getBaseLength(g);
+      var c = u * tailWidthFactor * swallowTailFactor;
+      swallowTailPnt = $this.getThirdPoint(g[1], g[0], 0, c, !0);
+      var p = l / u;
+      var h = $this.getAttackArrowBodyPoints(g, s, a, p);
+      const t = h.length;
+      var d = [e].concat(h.slice(0, t / 2));
+      d.push(s);
+      var f = [r].concat(h.slice(t / 2, t));
+      var newArray = [];
+      f.push(a);
+      d = $this.getQBSplinePoints(d);
+      f = $this.getQBSplinePoints(f);
+      newArray = $this.array2Dto1D(
+        d.concat(i, f.reverse(), [swallowTailPnt, d[0]])
+      );
+
+      result.polygonalPoint =
+        $this.Cesium.Cartesian3.fromDegreesArray(newArray);
+    }
+    return result;
+  }
+
+  getAttackArrowHeadPoints(t, o, e, defaultParam) {
+    var $this = this;
+    const headHeightFactor = defaultParam.headHeightFactor;
+    const headTailFactor = defaultParam.headTailFactor;
+    const headWidthFactor = defaultParam.headWidthFactor;
+    const neckWidthFactor = defaultParam.neckWidthFactor;
+    const neckHeightFactor = defaultParam.neckHeightFactor;
+    var r = $this.getBaseLength(t);
+    var n = r * headHeightFactor;
+    var g = t[t.length - 1];
+    r = $this.distance(g, t[t.length - 2]);
+    var i = $this.distance(o, e);
+    n > i * headTailFactor && (n = i * headTailFactor);
+    var s = n * headWidthFactor;
+    var a = n * neckWidthFactor;
+    n = n > r ? r : n;
+    var l = n * neckHeightFactor;
+    var u = $this.getThirdPoint(t[t.length - 2], g, 0, n, !0);
+    var c = $this.getThirdPoint(t[t.length - 2], g, 0, l, !0);
+    var p = $this.getThirdPoint(g, u, Math.PI / 2, s, !1);
+    var h = $this.getThirdPoint(g, u, Math.PI / 2, s, !0);
+    var d = $this.getThirdPoint(g, c, Math.PI / 2, a, !1);
+    var f = $this.getThirdPoint(g, c, Math.PI / 2, a, !0);
+    return [d, p, g, h, f];
+  }
+
+  getAttackArrowBodyPoints = function(t, o, e, r) {
+    var $this = this;
+    for (
+      var n = $this.wholeDistance(t),
+        g = $this.getBaseLength(t),
+        i = g * r,
+        s = $this.distance(o, e),
+        a = (i - s) / 2,
+        l = 0,
+        u = [],
+        c = [],
+        p = 1;
+      p < t.length - 1;
+      p++
+    ) {
+      var h = $this.getAngleOfThreePoints(t[p - 1], t[p], t[p + 1]) / 2;
+      l += $this.distance(t[p - 1], t[p]);
+      var d = (i / 2 - (l / n) * a) / Math.sin(h);
+      var f = $this.getThirdPoint(t[p - 1], t[p], Math.PI - h, d, !0);
+      var E = $this.getThirdPoint(t[p - 1], t[p], h, d, !1);
+      u.push(f);
+      c.push(E);
+    }
+    return u.concat(c);
+  };
+
+  getAngleOfThreePoints(t, o, e) {
+    var r = this.getAzimuth(o, t) - this.getAzimuth(o, e);
+    return r < 0 ? r + Math.PI * 2 : r;
+  }
+
+  dereplication(arr) {
+    return arr.filter((value, index, array) => {
+      return (
+        array.findIndex((item) => {
+          return item[0] === value[0] && item[1] === value[1];
+        }) === index
+      );
+    });
+  }
+
+  getBaseLength(t) {
+    return Math.pow(this.wholeDistance(t), 0.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);
+    var i = n ? g + e : g - e;
+    var s = r * Math.cos(i);
+    var a = r * Math.sin(i);
+    return [o[0] + s, o[1] + a];
+  }
+
+  getAzimuth(t, o) {
+    var e;
+    var 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
+    );
+  }
+
+  isClockWise(t, o, e) {
+    return (e[1] - t[1]) * (o[0] - t[0]) > (o[1] - t[1]) * (e[0] - t[0]);
+  }
+
+  mid(t, o) {
+    return [(t[0] + o[0]) / 2, (t[1] + o[1]) / 2];
+  }
+
+  getQBSplinePoints = function(t) {
+    if (t.length <= 2) return t;
+    var o = 2;
+    var e = [];
+    var r = t.length - o - 1;
+    var y = 0;
+    e.push(t[0]);
+    for (var n = 0; r >= n; n++) {
+      for (var g = 0; g <= 1; g += 0.05) {
+        for (var i = (y = 0), s = 0; o >= s; s++) {
+          var a = this.getQuadricBSplineFactor(s, g);
+          i += a * t[n + s][0];
+          y += a * t[n + s][1];
+        }
+        e.push([i, y]);
+      }
+    }
+    e.push(t[t.length - 1]);
+    return e;
+  };
+  getQuadricBSplineFactor = function(t, o) {
+    return t == 0
+      ? Math.pow(o - 1, 2) / 2
+      : t == 1
+      ? (-2 * Math.pow(o, 2) + 2 * o + 1) / 2
+      : t == 2
+      ? Math.pow(o, 2) / 2
+      : 0;
+  };
+  array2Dto1D = function(array) {
+    var newArray = [];
+    array.forEach(function(elt) {
+      newArray.push(elt[0]);
+      newArray.push(elt[1]);
+    });
+    return newArray;
+  };
+}
+
+export default DrawAttackArrow;