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

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

@@ -0,0 +1,114 @@
+/*
+绘制图标
+ */
+
+class DrawBillboard {
+  constructor(arg) {
+    this.objId = Number(
+      new Date().getTime() + "" + Number(Math.random() * 1000).toFixed(0)
+    );
+    this.viewer = arg.viewer;
+    this.Cesium = arg.Cesium;
+    this.handler = null;
+    this._billboard = null;
+    this._billboardData = null; //点数据用于构造billboard
+    this._entities = [];
+  }
+
+  //返回最后活动点
+  get billboard() {
+    return this._billboard;
+  }
+
+  //返回点数据用于加载billboard
+  getData() {
+    return this._billboardData;
+  }
+
+  //加载图标
+  loadBillboard(data) {
+    return this.createBillboard(data);
+  }
+
+  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 (!cartesian) return;
+      var billboard = $this.createBillboard(cartesian);
+      $this._billboardData = cartesian;
+      $this._billboard = billboard;
+    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  }
+
+  // 创建点击删除事件
+  creatDeleteClick(isSelect) {
+    const $this = this;
+    if (isSelect) {
+      this.handler = new this.Cesium.ScreenSpaceEventHandler(
+        $this.viewer.scene.canvas
+      );
+      this.handler.setInputAction(function (movement) {
+        var pick = $this.viewer.scene.pick(movement.position, 3, 3);
+
+        if (!pick) {
+          return;
+        }
+        $this.viewer.entities.removeById(pick.id._id);
+      }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    } else {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  //创建图标
+  createBillboard(cartesian) {
+    var img = require("../../assets/mark4.png");
+    var $this = this;
+    var billboard = this.viewer.entities.add({
+      position: cartesian,
+      billboard: {
+        image: img,
+        scale: 1,
+        horizontalOrigin: $this.Cesium.HorizontalOrigin.CENTER,
+        verticalOrigin: $this.Cesium.VerticalOrigin.BOTTOM,
+        heightReference: $this.Cesium.HeightReference.CLAMP_TO_GROUND,
+        disableDepthTestDistance: Number.MAX_VALUE,
+      },
+    });
+    billboard.objId = this.objId;
+    $this._entities.push(billboard); //加载脏数据
+    return billboard;
+  }
+
+  destroy() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  //清空实体对象
+  clear() {
+    for (var i = 0; i < this._entities.length; i++) {
+      this.viewer.entities.remove(this._entities[i]);
+    }
+    this._billboard = null;
+    this._billboardData = null;
+    this._entities = [];
+  }
+  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 DrawBillboard;

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

@@ -0,0 +1,311 @@
+/*
+绘制圆
+ */
+import * as turf from '@turf/turf';
+class DrawCircle {
+  constructor(arg) {
+    this.drawName = 'DrawCircle';
+    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._cicle = null; // 活动圆
+    this.floatingPoint = null;
+    this._cicleLast = null; // 最后一个圆
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_cicle = []; // 脏数据
+    this._cicleData = null; // 用于构造圆形数据
+  }
+
+  get cicle() {
+    return this._cicleLast;
+  }
+
+  // 修改样式
+  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;
+  }
+
+  // 加载圆
+  loadCicle(data) {
+    for (var i = 0; i < this._entities_point.length; i++) {
+      this.viewer.entities.remove(this._entities_point[i]);
+    }
+    var that = this;
+    var position = data[0];
+    var value = data;
+    var r = Math.sqrt(
+      Math.pow(value[0].x - value[value.length - 1].x, 2) +
+        Math.pow(value[0].y - value[value.length - 1].y, 2)
+    );
+
+    var shape = this.viewer.entities.add({
+      position: position,
+      name: 'circle',
+      type: 'circle',
+      ellipse: {
+        semiMinorAxis: r,
+        semiMajorAxis: r,
+        material: that.Cesium.Color.fromCssColorString(that.Color),
+        outline: true,
+        clampToGround: true
+      }
+    });
+    return shape;
+  }
+
+  // 返回数据
+  getData() {
+    return this._cicleData;
+  }
+
+  startCreate() {
+    this.handler = new this.Cesium.ScreenSpaceEventHandler(
+      this.viewer.scene.canvas
+    );
+    this.viewer.scene.globe.depthTestAgainstTerrain = true; // 启动深度测试，确保绘制的时候不会穿过地形表面
+
+    var $this = this;
+    this.handler.setInputAction(function(evt) {
+      // 单机开始绘制
+      $this.viewer.scene.globe.depthTestAgainstTerrain = true;
+      // 屏幕坐标转地形上坐标
+      var cartesian = $this.getCatesian3FromPX(evt.position);
+      if ($this._positions.length == 0) {
+        $this._positions.push(cartesian.clone());
+        $this.floatingPoint = $this.createPoint(cartesian);
+      }
+      if (!$this._cicle) {
+        $this.createPoint(cartesian); // 绘制点
+      }
+      $this._positions.push(cartesian);
+    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+    this.handler.setInputAction(function(evt) {
+      // 移动时绘制圆
+      if ($this._positions.length < 1) return;
+      var cartesian = $this.viewer.scene.pickPosition(evt.endPosition); // $this.getCatesian3FromPX(evt.endPosition);
+      if (!$this.Cesium.defined($this._cicle)) {
+        $this._cicle = $this.createCicle();
+      }
+      $this.floatingPoint.position.setValue(cartesian);
+      if ($this._cicle) {
+        // 因为有时候获取移动的点会出现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._cicle) return;
+      $this.viewer.scene.globe.depthTestAgainstTerrain = false;
+      var cartesian = $this.viewer.scene.pickPosition(evt.position); // $this.getCatesian3FromPX(evt.position);
+      $this._positions.pop();
+      $this._positions.push(cartesian);
+      $this._cicleData = $this._positions.concat();
+      $this.viewer.entities.remove($this._cicle); // 移除
+      $this._cicle = null;
+      $this._positions = [];
+      $this.floatingPoint.position.setValue(cartesian);
+      var cicle = $this.loadCicle($this._cicleData); // 加载
+      $this._entities_cicle.push(cicle);
+      $this._cicleLast = cicle;
+      $this.clearPoint();
+      if (typeof $this.callback == 'function') {
+        var entity = cicle;
+
+        if (entity.ellipse) {
+          // 获取圆形实体的中心点和半径
+          var center = entity.position.getValue($this.Cesium.JulianDate.now());
+          // 获取圆形实体的中心点
+
+          // 将中心点坐标转换为经纬度坐标
+          var cartographic = $this.Cesium.Cartographic.fromCartesian(center);
+          var longitude = $this.Cesium.Math.toDegrees(cartographic.longitude);
+          var latitude = $this.Cesium.Math.toDegrees(cartographic.latitude);
+          var radius = entity.ellipse.semiMajorAxis.getValue(
+            $this.Cesium.JulianDate.now()
+          );
+
+          // 将半径从米转换为度
+          radius /= 1000;
+
+          // 定义圆形的细分度数
+          var subdivisions = 64;
+
+          // 创建圆形的多边形逼近
+          // 中心点坐标用的是经纬度，实体拿到的事笛卡尔坐标
+          // 半径用的单位是公里，实体拿到的事米
+          var circle = turf.circle([longitude, latitude], radius, {
+            steps: subdivisions,
+            units: 'kilometers'
+          });
+
+          // 创建 GeoJSON 对象
+          var geojson = {
+            type: 'Feature',
+            geometry: circle.geometry,
+            properties: {
+              color: $this.Color
+            }
+          };
+
+          $this.callback(geojson);
+        }
+
+        // var position1 = $this._cicleData[0];
+        // const value = $this._cicleData;
+        // const r = Math.sqrt(
+        //   Math.pow(value[0].x - value[value.length - 1].x, 2) +
+        //     Math.pow(value[0].y - value[value.length - 1].y, 2)
+        // );
+
+        // // 创建圆形的坐标集合
+        // const coordinates = [];
+
+        // // 定义圆形的细分度数
+        // const subdivisions = 64;
+
+        // for (let i = 0; i <= subdivisions; i++) {
+        //   const theta = (i / subdivisions) * (2 * Math.PI);
+        //   const x = position1.x + r * Math.cos(theta);
+        //   const y = position1.y + r * Math.sin(theta);
+        //   position1 = new Cesium.Cartesian3(x, y, position1.z);
+
+        //   const cartographic = Cesium.Cartographic.fromCartesian(position1);
+        //   const longitude = Cesium.Math.toDegrees(cartographic.longitude);
+        //   const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+
+        //   coordinates.push([longitude, latitude]);
+        // }
+
+        // // 创建GeoJSON对象;
+        // var geojson = {
+        //   type: 'Polygon',
+        //   coordinates: [coordinates],
+        //   color: $this.Color
+        // };
+
+        // $this.callback(geojson);
+
+        // console.log(geojson);
+      }
+      // $this.handler.destroy();
+    }, $this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+  }
+
+  // 创建圆
+  createCicle() {
+    var that = this;
+    var shape = this.viewer.entities.add({
+      position: that._positions[0],
+      name: 'circle',
+      type: 'circle',
+      ellipse: {
+        semiMinorAxis: new that.Cesium.CallbackProperty(function() {
+          // 半径 两点间距离
+          var r = Math.sqrt(
+            Math.pow(
+              that._positions[0].x -
+                that._positions[that._positions.length - 1].x,
+              2
+            ) +
+              Math.pow(
+                that._positions[0].y -
+                  that._positions[that._positions.length - 1].y,
+                2
+              )
+          );
+          return r || r + 1;
+        }, false),
+        semiMajorAxis: new that.Cesium.CallbackProperty(function() {
+          var r = Math.sqrt(
+            Math.pow(
+              that._positions[0].x -
+                that._positions[that._positions.length - 1].x,
+              2
+            ) +
+              Math.pow(
+                that._positions[0].y -
+                  that._positions[that._positions.length - 1].y,
+                2
+              )
+          );
+          return r || r + 1;
+        }, false),
+        material:
+          that.Cesium.Color.fromCssColorString('#ffffff').withAlpha(0.5),
+        outline: true,
+        clampToGround: true
+      }
+    });
+    that._entities_cicle.push(shape);
+    return shape;
+  }
+
+  // 创建点
+  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;
+  }
+
+  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;
+  }
+
+  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_cicle.length; i++) {
+      this.viewer.entities.remove(this._entities_cicle[i]);
+    }
+    this._cicle = null; // 活动圆
+    this.floatingPoint = null;
+    this._cicleLast = null; // 最后一个圆
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_cicle = []; // 脏数据
+    this._cicleData = null; // 用于构造圆形数据
+  }
+}
+
+export default DrawCircle;

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

@@ -0,0 +1,237 @@
+/*
+绘制椭圆
+ */
+class DrawCircle {
+  constructor(arg) {
+    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._cicle = null; // 活动圆
+    this.floatingPoint = null;
+    this._cicleLast = null; // 最后一个圆
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_cicle = []; // 脏数据
+    this._cicleData = null; // 用于构造圆形数据
+  }
+
+  get cicle() {
+    return this._cicleLast;
+  }
+
+  // 加载椭圆
+  loadEllipse(data) {
+    var that = this;
+    var position = data[0];
+    var value = data;
+    var semiMajorAxis = Math.sqrt(
+      Math.pow(value[1].x - value[0].x, 2) +
+        Math.pow(value[1].y - value[0].y, 2)
+    );
+    var semiMinorAxis = semiMajorAxis * value[2].z; // 设置短轴为长轴的比例
+    var shape = this.viewer.entities.add({
+      position: position,
+      name: "ellipse",
+      type: "ellipse",
+      ellipse: {
+        semiMinorAxis: semiMinorAxis,
+        semiMajorAxis: semiMajorAxis,
+        material: that.Cesium.Color.fromCssColorString(that.Color),
+        outline: true,
+      },
+    });
+    return shape;
+  }
+
+  // 返回数据
+  getData() {
+    return this._cicleData;
+  }
+
+  startCreateEllipse() {
+    this.handler = new this.Cesium.ScreenSpaceEventHandler(
+      this.viewer.scene.canvas
+    );
+    this.viewer.scene.globe.depthTestAgainstTerrain = true;
+    var $this = this;
+    this.handler.setInputAction(function (evt) {
+      // 单机开始绘制
+      $this.viewer.scene.globe.depthTestAgainstTerrain = true;
+      // 屏幕坐标转地形上坐标
+      var cartesian = $this.getCatesian3FromPX(evt.position);
+      if ($this._positions.length == 0) {
+        $this._positions.push(cartesian.clone());
+        $this.floatingPoint = $this.createPoint(cartesian);
+      }
+      if (!$this._ellipse && $this._positions.length == 2) {
+        $this.createPoint(cartesian); // 绘制点
+      }
+      if ($this._positions.length == 3) {
+        $this._positions.pop(); // 只需要3个点，弹出最后一个点
+        $this._ellipseData = $this._positions.concat();
+        var ellipse = $this.loadEllipse($this._ellipseData); // 加载椭圆
+        $this._entities_ellipse.push(ellipse);
+        $this._ellipseLast = ellipse;
+        $this.clearPoint();
+        if (typeof $this.callback == "function") {
+          $this.callback(ellipse);
+        }
+        $this.handler.destroy();
+      }
+      $this._positions.push(cartesian);
+    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.setInputAction(function (evt) {
+      // 移动时绘制椭圆
+      if ($this._positions.length < 2) return;
+      var cartesian = $this.viewer.scene.pickPosition(evt.endPosition); // $this.getCatesian3FromPX(evt.endPosition);
+      if (!$this._ellipse) {
+        $this.createPoint(cartesian); // 绘制点
+      }
+      if ($this._positions.length == 3) {
+        $this.viewer.entities.remove($this.floatingPoint); // 移除浮动点
+        $this.floatingPoint = null;
+        $this.clearPoint();
+        $this._positions.pop(); // 只需要3个点，弹出最后一个点
+        $this._ellipseData = $this._positions.concat();
+        var ellipse = $this.loadEllipse($this._ellipseData); // 加载椭圆
+        $this._entities_ellipse.push(ellipse);
+        $this._ellipseLast = ellipse;
+        if (typeof $this.callback == "function") {
+          $this.callback(ellipse);
+        }
+        $this.handler.destroy();
+      }
+      $this.floatingPoint.position.setValue(cartesian); // 更新浮动点的位置
+      $this._positions[$this._positions.length - 1] = cartesian; // 更新最后一个点的位置
+    }, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  }
+
+  // 创建点击删除事件
+  creatDeleteClick(isSelect) {
+    const $this = this;
+    if (isSelect) {
+      this.handler = new this.Cesium.ScreenSpaceEventHandler(
+        $this.viewer.scene.canvas
+      );
+      this.handler.setInputAction(function (movement) {
+        var pick = $this.viewer.scene.pick(movement.position, 3, 3);
+
+        if (!pick) {
+          return;
+        }
+        $this.viewer.entities.removeById(pick.id._id);
+      }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    } else {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  // 创建圆
+  createCicle() {
+    var that = this;
+    var shape = this.viewer.entities.add({
+      position: that._positions[0],
+      name: "circle",
+      type: "circle",
+      ellipse: {
+        semiMinorAxis: new that.Cesium.CallbackProperty(function () {
+          // 半径 两点间距离
+          var r = Math.sqrt(
+            Math.pow(
+              that._positions[0].x -
+                that._positions[that._positions.length - 1].x,
+              2
+            ) +
+              Math.pow(
+                that._positions[0].y -
+                  that._positions[that._positions.length - 1].y,
+                2
+              )
+          );
+          return r || r + 1;
+        }, false),
+        semiMajorAxis: new that.Cesium.CallbackProperty(function () {
+          var r = Math.sqrt(
+            Math.pow(
+              that._positions[0].x -
+                that._positions[that._positions.length - 1].x,
+              2
+            ) +
+              Math.pow(
+                that._positions[0].y -
+                  that._positions[that._positions.length - 1].y,
+                2
+              )
+          );
+          return r || r + 1;
+        }, false),
+        material:
+          that.Cesium.Color.fromCssColorString("#ffffff").withAlpha(0.5),
+        outline: true,
+      },
+    });
+    that._entities_cicle.push(shape);
+    return shape;
+  }
+
+  // 创建点
+  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;
+  }
+
+  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;
+  }
+
+  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 (var i = 0; i < this._entities_point.length; i++) {
+      this.viewer.entities.remove(this._entities_point[i]);
+    }
+
+    for (var i = 0; i < this._entities_cicle.length; i++) {
+      this.viewer.entities.remove(this._entities_cicle[i]);
+    }
+    this._cicle = null; // 活动圆
+    this.floatingPoint = null;
+    this._cicleLast = null; // 最后一个圆
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_cicle = []; // 脏数据
+    this._cicleData = null; // 用于构造圆形数据
+  }
+}
+
+export default DrawCircle;