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

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

@@ -0,0 +1,215 @@
+// DrawCurve
+/*
+绘制矩形
+ */
+import * as turf from '@turf/turf';
+class DrawRectangle {
+  constructor(arg) {
+    this.drawName = 'DrawPolygon';
+    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.pxNum = arg.data.pxNum || 5;
+    this.handler = null;
+    this.floatingPoint = null; // 标识点
+    this._rectangle = null; // 活动矩形
+    this._rectangleLast = null; // 最后一个矩形
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_rectangle = []; // 脏数据
+    this._rectangleData = null; // 用于构造矩形数据
+  }
+
+  // 返回最后图形
+  get line() {
+    return this._rectangleLast;
+  }
+  // 修改样式
+  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._rectangleData;
+  }
+
+  // 加载
+  loadRectangle(data) {
+    for (let i = 0; i < this._entities_point.length; i++) {
+      this.viewer.entities.remove(this._entities_point[i]);
+    }
+    var $this = this;
+    for (let i = 0; i < $this._entities_point.length; i++) {
+      $this.viewer.entities.remove($this._entities_point[i]);
+    }
+    var shape = this.viewer.entities.add({
+      name: 'rectangle',
+      rectangle: {
+        coordinates: $this.Cesium.Rectangle.fromCartesianArray(data),
+        material: $this.Cesium.Color.fromCssColorString($this.Color)
+      }
+    });
+    $this._entities_rectangle.push(shape);
+    return shape;
+  }
+
+  // 开始创建
+  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); // 绘制点
+      }
+      $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._rectangle)) {
+        $this._rectangle = $this.createRectangle();
+      }
+      $this.floatingPoint.position.setValue(cartesian);
+      if ($this._rectangle) {
+        // 因为有时候获取移动的点会出现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._rectangle) return;
+      var cartesian = $this.getCatesian3FromPX(evt.position);
+      $this._positions.pop();
+      $this._positions.push(cartesian);
+      $this.createPoint(cartesian); // 绘制点
+      $this._rectangleData = $this._positions.concat();
+      $this.viewer.entities.remove($this._rectangle); // 移除
+      $this._rectangle = null;
+      $this._positions = [];
+      $this.floatingPoint.position.setValue(cartesian);
+      var rectangle = $this.loadRectangle($this._rectangleData); // 加载
+      $this._entities_rectangle.push(rectangle);
+      $this._rectangleLast = rectangle;
+      if (typeof $this.callback == 'function') {
+        var entity = rectangle;
+
+        if (entity.rectangle) {
+          // 获取矩形实体的对角线顶点坐标
+
+          var quadrupoleCoordinate = entity.rectangle.coordinates.getValue(
+            $this.Cesium.JulianDate.now()
+          );
+
+          // 将顶点坐标转换为 turf 库中的矩形对象
+          const rectangle1 = turf.bboxPolygon([
+            $this.Cesium.Math.toDegrees(quadrupoleCoordinate.west),
+            $this.Cesium.Math.toDegrees(quadrupoleCoordinate.south),
+            $this.Cesium.Math.toDegrees(quadrupoleCoordinate.east),
+            $this.Cesium.Math.toDegrees(quadrupoleCoordinate.north)
+          ]);
+
+          // 将矩形对象封装为 GeoJSON 对象
+          var geojson = {
+            type: 'Feature',
+            geometry: rectangle1.geometry,
+            properties: {
+              color: $this.Color
+            }
+          };
+
+          $this.callback(geojson);
+        }
+      }
+      // $this.handler.destroy();
+    }, $this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+  }
+
+  // 创建点
+  createPoint(cartesian) {
+    var $this = this;
+    var point = this.viewer.entities.add({
+      position: cartesian,
+      point: {
+        pixelSize: 10,
+        color: $this.Cesium.Color.YELLOW
+      }
+    });
+    $this._entities_point.push(point);
+    return point;
+  }
+
+  // 创建矩形
+  createRectangle() {
+    var $this = this;
+    var shape = this.viewer.entities.add({
+      name: 'rectangle',
+      rectangle: {
+        coordinates: new $this.Cesium.CallbackProperty(function() {
+          var obj = $this.Cesium.Rectangle.fromCartesianArray($this._positions);
+          return obj;
+        }, false),
+        material:
+          $this.Cesium.Color.fromCssColorString('#ffffff').withAlpha(0.5)
+      }
+    });
+    $this._entities_rectangle.push(shape);
+    return shape;
+  }
+
+  // 销毁
+  destroy() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  // 清空实体对象
+  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_rectangle.length; i++) {
+      this.viewer.entities.remove(this._entities_rectangle[i]);
+    }
+    this.floatingPoint = null; // 标识点
+    this._rectangle = null; // 活动矩形
+    this._rectangleLast = null; // 最后一个矩形
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_rectangle = []; // 脏数据
+    this._rectangleData = 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;
+  }
+}
+
+export default DrawRectangle;

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

@@ -0,0 +1,364 @@
+// DrawstraightArrow
+/*
+绘制进攻箭头
+ */
+class DrawstraightArrow {
+  constructor(arg) {
+    this.drawName = 'DrawstraightArrow';
+    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.pxNum = arg.data.pxNum || 5;
+    this.handler = null;
+    this.floatingPoint = null; // 标识点
+    this._straightArrow = null; // 活动箭头
+    this._straightArrowLast = null; // 最后一个箭头
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_straightArrow = []; // 脏数据
+    this._straightArrowData = null; // 用于构造箭头数据
+  }
+
+  // 返回箭头
+  get straightArrow() {
+    return this._straightArrowLast;
+  }
+
+  // 修改样式
+  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._straightArrowData;
+  }
+
+  // 加载箭头
+  loadStraightArrow(data) {
+    var $this = this;
+    if (data.length < 2) {
+      return null;
+    }
+    for (var i = 0; i < this._entities_point.length; i++) {
+      this.viewer.entities.remove(this._entities_point[i]);
+    }
+    var length = data.length;
+    var p1 = data[0];
+    var p2 = data[length - 1];
+    var firstPoint = $this.cartesianToLatlng(p1);
+    var endPoints = $this.cartesianToLatlng(p2);
+    var arrow = [];
+    var res = $this.fineArrow(
+      [firstPoint[0], firstPoint[1]],
+      [endPoints[0], endPoints[1]]
+    );
+    for (let i = 0; i < res.length; i++) {
+      var cart3 = new $this.Cesium.Cartesian3(res[i].x, res[i].y, res[i].z);
+      arrow.push(cart3);
+    }
+    var arrowEntity = $this.viewer.entities.add({
+      polygon: {
+        hierarchy: new $this.Cesium.PolygonHierarchy(arrow),
+        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);
+      }
+      if (!$this._straightArrow) {
+        $this.createPoint(cartesian); // 绘制点
+      }
+      $this._positions.push(cartesian);
+    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+    this.handler.setInputAction(function(evt) {
+      // 移动时绘制面
+      if ($this._positions.length < 2) return;
+      var cartesian = $this.getCatesian3FromPX(evt.endPosition);
+      if (!$this.Cesium.defined($this._straightArrow)) {
+        $this._straightArrow = $this.createStraightArrow();
+      }
+      $this.floatingPoint.position.setValue(cartesian);
+      if ($this._straightArrow) {
+        // 因为有时候获取移动的点会出现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._straightArrow) return;
+      var cartesian = $this.getCatesian3FromPX(evt.position);
+      $this._positions.pop();
+      $this._positions.push(cartesian);
+      $this._straightArrowData = $this._positions.concat();
+      $this.viewer.entities.remove($this._straightArrow); // 移除
+      $this._straightArrow = null;
+      $this._positions = [];
+      $this.floatingPoint.position.setValue(cartesian);
+      var straightArrow = $this.loadStraightArrow($this._straightArrowData); // 加载
+      $this._entities_straightArrow.push(straightArrow);
+      $this._straightArrowLast = 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);
+  }
+
+  // 创建直线箭头
+  createStraightArrow() {
+    var $this = this;
+    var arrowEntity = $this.viewer.entities.add({
+      polygon: {
+        hierarchy: new $this.Cesium.CallbackProperty(function() {
+          // return new $this.Cesium.PolygonHierarchy($this._positions);
+          var length = $this._positions.length;
+          var p1 = $this._positions[0];
+          var p2 = $this._positions[length - 1];
+          var firstPoint = $this.cartesianToLatlng(p1);
+          var endPoints = $this.cartesianToLatlng(p2);
+          var arrow = [];
+          var res = $this.fineArrow(
+            [firstPoint[0], firstPoint[1]],
+            [endPoints[0], endPoints[1]]
+          );
+          for (var i = 0; i < res.length; i++) {
+            var cart3 = new $this.Cesium.Cartesian3(
+              res[i].x,
+              res[i].y,
+              res[i].z
+            );
+            arrow.push(cart3);
+          }
+          return new $this.Cesium.PolygonHierarchy(arrow);
+        }, false),
+        show: true,
+        fill: true,
+        clampToGround: true,
+        material:
+          $this.Cesium.Color.fromCssColorString('#ffffff').withAlpha(0.5)
+      }
+    });
+    $this._entities_straightArrow.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
+      }
+    });
+    $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_straightArrow.length; i++) {
+      this.viewer.entities.remove(this._entities_straightArrow[i]);
+    }
+
+    this.floatingPoint = null; // 标识点
+    this._straightArrow = null; // 活动箭头
+    this._straightArrowLast = null; // 最后一个箭头
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_straightArrow = []; // 脏数据
+    this._straightArrowData = 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 {
+      tailWidthFactor: 0.15,
+      neckWidthFactor: 0.2,
+      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;
+    // 画箭头的函数
+    const tailWidthFactor = $this.fineArrowDefualParam().tailWidthFactor;
+    const neckWidthFactor = $this.fineArrowDefualParam().neckWidthFactor;
+    const headWidthFactor = $this.fineArrowDefualParam().headWidthFactor;
+    const headAngle = $this.fineArrowDefualParam().headAngle;
+    const neckAngle = $this.fineArrowDefualParam().neckAngle;
+    var o = [];
+    o[0] = tailPoint;
+    o[1] = headerPoint;
+    var e = o[0];
+    var r = o[1];
+    var n = $this.getBaseLength(o);
+    var g = n * tailWidthFactor;
+    // 尾部宽度因子
+    var i = n * neckWidthFactor;
+    // 脖子宽度银子
+    var s = n * headWidthFactor;
+    // 头部宽度因子
+    var a = $this.getThirdPoint(r, e, Math.PI / 2, g, !0);
+    var l = $this.getThirdPoint(r, e, Math.PI / 2, g, !1);
+    var u = $this.getThirdPoint(e, r, headAngle, s, !1);
+    var c = $this.getThirdPoint(e, r, headAngle, s, !0);
+    var p = $this.getThirdPoint(e, r, neckAngle, i, !1);
+    var h = $this.getThirdPoint(e, r, neckAngle, i, !0);
+    var 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 $this.Cesium.Cartesian3.fromDegreesArray(d);
+  }
+
+  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
+    );
+  }
+}
+
+export default DrawstraightArrow;