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

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

@@ -0,0 +1,218 @@
+// DrawPolyline
+/*
+绘制线段箭头
+ */
+class DrawPolylineJT {
+  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._polyline = null; // 活动线
+    this._polylineLast = null; // 最后一条线
+    this._positions = []; // 活动点
+    this._entities_point = []; // 脏数据
+    this._entities_line = []; // 脏数据
+    this._polylineData = null; // 用于构造线数据
+  }
+
+  // 返回最后活动线
+  get line() {
+    return this._polylineLast;
+  }
+
+  // 返回线数据用于加载线
+  getData() {
+    return this._polylineData;
+  }
+
+  // 加载线
+  loadPolyline(data) {
+    var $this = this;
+    for (var i = 0; i < $this._entities_point.length; i++) {
+      $this.viewer.entities.remove($this._entities_point[i]);
+    }
+    var polyline = this.viewer.entities.add({
+      polyline: {
+        positions: data,
+        show: true,
+        // material: $this.Cesium.Color.fromCssColorString($this.Color),
+        material: new $this.Cesium.PolylineArrowMaterialProperty(
+          $this.Cesium.Color.fromCssColorString($this.Color)
+        ),
+        arrowSize: 3600, // 箭头大小
+        width: $this.pxNum,
+        clampToGround: true
+      }
+    });
+    return polyline;
+  }
+
+  // 开始创建
+  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._positions.push(cartesian);
+      $this.createPoint(cartesian); // 绘制点
+    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.setInputAction(function(evt) {
+      // 移动时绘制线
+      if ($this._positions.length < 1) return;
+      var cartesian = $this.getCatesian3FromPX(evt.endPosition);
+      if (!$this.Cesium.defined($this._polyline)) {
+        $this._polyline = $this.createPolyline();
+      }
+      if ($this._polyline) {
+        $this._positions.pop();
+        $this._positions.push(cartesian);
+      }
+    }, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    this.handler.setInputAction(function(evt) {
+      if (!$this._polyline) return;
+      var cartesian = $this.getCatesian3FromPX(evt.position);
+      $this._positions.pop();
+      $this._positions.push(cartesian);
+      $this.createPoint(cartesian); // 绘制点
+      $this._polylineData = $this._positions.concat();
+      $this.viewer.entities.remove($this._polyline); // 移除
+      $this._polyline = null;
+      $this._positions = [];
+      var line = $this.loadPolyline($this._polylineData); // 加载线
+      $this._entities_line.push(line);
+      $this._polylineLast = line;
+      if (typeof $this.callback == 'function') {
+        // 提取多边形层次结构
+        var hierarchy = line.polyline.positions.getValue();
+        // 从层次结构中提取坐标
+        var coordinates = hierarchy.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: 'LineString',
+          coordinates: coordinates,
+          geometry: {
+            type: 'LineString'
+          },
+          properties: {
+            isarrow: true,
+            color: $this.Color,
+            width: $this.pxNum
+          }
+        };
+        $this.callback(geojson);
+      }
+      // $this.handler.destroy();
+    }, $this.Cesium.ScreenSpaceEventType.RIGHT_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;
+    }
+  }
+
+  // 创建点
+  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;
+  }
+
+  // 创建线
+  createPolyline() {
+    var $this = this;
+    var polyline = this.viewer.entities.add({
+      polyline: {
+        // 使用cesium的peoperty
+        positions: new $this.Cesium.CallbackProperty(function() {
+          return $this._positions;
+        }, false),
+        show: true,
+        material: new $this.Cesium.PolylineArrowMaterialProperty(
+          $this.Cesium.Color.fromCssColorString('#ffffff').withAlpha(0.5)
+        ),
+        arrowSize: 188, // 箭头大小
+        width: $this.pxNum,
+        clampToGround: true
+      }
+    });
+    $this._entities_line.push(polyline);
+    return polyline;
+  }
+
+  // 销毁
+  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_line.length; i++) {
+      this.viewer.entities.remove(this._entities_line[i]);
+    }
+    this._polyline = null;
+    this._positions = [];
+    this._entities_point = []; // 脏数据
+    this._entities_line = []; // 脏数据
+    this._polylineData = null; // 用于构造线数据
+    this._polylineLast = 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 DrawPolylineJT;

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

@@ -0,0 +1,314 @@
+// 绘制坡面
+
+class DrawProFile {
+  constructor(arg) {
+    this.drawName = "DrawProFile";
+    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.opacityNum = arg.data.opacityNum || 1;
+    this.FontSize = arg.data.fontSize || 16;
+    this.callback = arg.data.callback || null;
+    this.pxNum = arg.data.pxNum || 5;
+    this.refData = arg.data.refData;
+    this.options = undefined;
+  }
+
+  /*
+   * @Author: Wang JianLei
+   * @Date: 2020-04-08 10:55:43
+   * @Last Modified by: 宋木桐
+   * @Last Modified time: 2024-08-26 15:51:57
+   */
+
+  //剖面分析
+  /******************************************* **
+剖面分析直接调用Profile()即可，左键画线，右键停止
+createProfileChart()方法绘制剖面图
+** ****************************************** */
+  Profile() {
+    var $this = this;
+    $this.viewer.scene.globe.depthTestAgainstTerrain = true;
+    var handler = new $this.Cesium.ScreenSpaceEventHandler(
+      $this.viewer.scene.canvas
+    );
+    var positions = [];
+    var positionsCartographic = [];
+    var positions_Inter = [];
+    var poly = null;
+    var distance = 0;
+    var cartesian = null;
+    var floatingPoint;
+    var DistanceArray = [];
+
+    var profileItem = [];
+
+    // let $menuBox = $("#SideBar");
+    // let outerW = $menuBox.outerWidth();
+    handler.setInputAction((movement) => {
+      // movement.endPosition.x = movement.endPosition.x - outerW;
+      cartesian = $this.viewer.scene.pickPosition(movement.endPosition);
+      if (positions.length >= 2) {
+        if (!$this.Cesium.defined(poly)) {
+          poly = new PolyLinePrimitive(positions);
+        } else {
+          positions.pop();
+          positions.push(cartesian);
+        }
+      }
+    }, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+    handler.setInputAction((movement) => {
+      // movement.position.x = movement.position.x - outerW;
+      cartesian = $this.viewer.scene.pickPosition(movement.position);
+      if (positions.length == 0) {
+        positions.push(cartesian.clone());
+      }
+      positions.push(cartesian);
+      if (poly) {
+        //进行插值计算
+        interPoints(poly.positions);
+        // distance = getSpaceDistance(positions_Inter);
+      } else {
+        distance = getSpaceDistance(positions);
+        var textDisance = distance + "米";
+        DistanceArray.push(distance);
+        floatingPoint = $this.viewer.entities.add({
+          position: positions[positions.length - 1],
+          point: {
+            pixelSize: 5,
+            color: $this.Cesium.Color.RED,
+            outlineColor: $this.Cesium.Color.WHITE,
+            outlineWidth: 2,
+            heightReference: $this.Cesium.HeightReference.NONE,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY, // 新增，禁用深度
+          },
+          label: {
+            text: textDisance,
+            font: "18px sans-serif",
+            fillColor: $this.Cesium.Color.GOLD,
+            style: $this.Cesium.LabelStyle.FILL_AND_OUTLINE,
+            outlineWidth: 2,
+            verticalOrigin: $this.Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new $this.Cesium.Cartesian2(20, -20),
+            heightReference: $this.Cesium.HeightReference.NONE,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY, // 新增，禁用深度
+          },
+        });
+      }
+    }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+    handler.setInputAction(function (movement) {
+      handler.destroy(); //关闭事件句柄
+      positions.pop(); //最后一个点无效
+      // createProfileChart(profileItem);
+      $this.viewer.scene.globe.depthTestAgainstTerrain = false;
+      console.log(
+        `output->profileItem`,
+
+        profileItem
+      );
+      $this.callback({
+        type: "profile",
+        data: profileItem,
+      });
+    }, $this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+
+    var PolyLinePrimitive = (function () {
+      function _(positions) {
+        this.options = {
+          polyline: {
+            show: true,
+            positions: [],
+            material: $this.Cesium.Color.CHARTREUSE,
+            width: 2,
+            clampToGround: true,
+          },
+        };
+        this.positions = positions;
+        this._init();
+      }
+      _.prototype._init = function () {
+        var _self = this;
+        var _update = function () {
+          return _self.positions;
+        };
+        //实时更新polyline.positions
+        this.options.polyline.positions = new $this.Cesium.CallbackProperty(
+          _update,
+          false
+        );
+        $this.viewer.entities.add(this.options);
+      };
+      return _;
+    })();
+
+    //空间两点距离计算函数
+    function getSpaceDistance(positions) {
+      profileItem = [
+        {
+          point: cartesian3ToDegrees(positions[0]),
+          distance: 0,
+        },
+      ];
+      var distance = 0;
+      for (var i = 0; i < positions.length - 1; i++) {
+        var point1cartographic = Cesium.Cartographic.fromCartesian(
+          positions[i]
+        );
+        var point2cartographic = Cesium.Cartographic.fromCartesian(
+          positions[i + 1]
+        );
+        /**根据经纬度计算出距离**/
+        var geodesic = new $this.Cesium.EllipsoidGeodesic();
+        geodesic.setEndPoints(point1cartographic, point2cartographic);
+        var s = geodesic.surfaceDistance;
+        //返回两点之间的距离
+        s = Math.sqrt(
+          Math.pow(s, 2) +
+          Math.pow(point2cartographic.height - point1cartographic.height, 2)
+        );
+        distance = distance + s;
+        var m_Item = {
+          point: cartesian3ToDegrees(positions[i + 1]),
+          distance: distance,
+        };
+        profileItem.push(m_Item);
+      }
+      return distance.toFixed(2);
+    }
+
+    function cartesian3ToDegrees(positions) {
+      // 假设 positions[0] 是一个 Cartesian3 对象
+      var cartographic =
+        $this.viewer.scene.globe.ellipsoid.cartesianToCartographic(positions);
+
+      // 提取经纬度和高度
+      var longitude = $this.Cesium.Math.toDegrees(cartographic.longitude);
+      var latitude = $this.Cesium.Math.toDegrees(cartographic.latitude);
+      var height = cartographic.height;
+
+      return { x: longitude, y: latitude, z: height };
+    }
+
+    //线段插值点
+    async function interPoints(positions) {
+      positionsCartographic = [];
+      var terrainSamplePositions = [];
+      for (let index = 0; index < positions.length - 1; index++) {
+        const element = positions[index];
+        var ellipsoid = $this.viewer.scene.globe.ellipsoid;
+        var cartographic = ellipsoid.cartesianToCartographic(element);
+        positionsCartographic.push(cartographic);
+      }
+      for (let i = 0; i < positionsCartographic.length; i++) {
+        const m_Cartographic0 = positionsCartographic[i];
+        const m_Cartographic1 = positionsCartographic[i + 1];
+        if (m_Cartographic1) {
+          var a =
+            Math.abs(m_Cartographic0.longitude - m_Cartographic1.longitude) *
+            10000000;
+          var b =
+            Math.abs(m_Cartographic0.latitude - m_Cartographic1.latitude) *
+            10000000;
+          //等距采样
+          if (a > b) b = a;
+          var length = parseInt(b / 2);
+          if (length > 200) length = 200;
+          if (length < 2) length = 2;
+          // var length = 4;//等分采样
+          for (var j = 0; j < length; j++) {
+            terrainSamplePositions.push(
+              new $this.Cesium.Cartographic(
+                Cesium.Math.lerp(
+                  m_Cartographic0.longitude,
+                  m_Cartographic1.longitude,
+                  j / (length - 1)
+                ),
+                Cesium.Math.lerp(
+                  m_Cartographic0.latitude,
+                  m_Cartographic1.latitude,
+                  j / (length - 1)
+                )
+              )
+            );
+          }
+          terrainSamplePositions.pop();
+        } else {
+          terrainSamplePositions.push(m_Cartographic0);
+        }
+      }
+      positions_Inter = [];
+      // await computeHeight(terrainSamplePositions);
+      let terrainProvider = $this.viewer.terrainProvider;
+
+      $this.Cesium.sampleTerrain(
+        terrainProvider,
+        11,
+        terrainSamplePositions
+      ).then((updatedPositions) => {
+        positions_Inter = [];
+        for (var n = 0; n < updatedPositions.length; n++) {
+          //地理坐标（弧度）转经纬度坐标
+          var m_cartographic = terrainSamplePositions[n];
+          // console.log('m_cartographic', m_cartographic);
+
+          var point = $this.Cesium.Cartesian3.fromDegrees(
+            (m_cartographic.longitude / Math.PI) * 180,
+            (m_cartographic.latitude / Math.PI) * 180,
+            m_cartographic.height
+          );
+          // console.log('point', point);
+          positions_Inter.push(point);
+        }
+        // console.log('positions_Inter', positions_Inter);
+
+        distance = getSpaceDistance(positions_Inter);
+        var textDisance = distance + "米";
+        DistanceArray.push(distance);
+        floatingPoint = $this.viewer.entities.add({
+          position: positions[positions.length - 1],
+          point: {
+            pixelSize: 5,
+            color: $this.Cesium.Color.RED,
+            outlineColor: $this.Cesium.Color.WHITE,
+            outlineWidth: 2,
+            heightReference: $this.Cesium.HeightReference.NONE,
+            // disableDepthTestDistance: Number.POSITIVE_INFINITY, // 新增，禁用深度
+          },
+          label: {
+            text: textDisance,
+            font: "18px sans-serif",
+            fillColor: $this.Cesium.Color.GOLD,
+            style: $this.Cesium.LabelStyle.FILL_AND_OUTLINE,
+            outlineWidth: 2,
+            verticalOrigin: $this.Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new $this.Cesium.Cartesian2(20, -20),
+            heightReference: $this.Cesium.HeightReference.NONE,
+            // disableDepthTestDistance: Number.POSITIVE_INFINITY, // 新增，禁用深度
+          },
+        });
+      });
+
+      // // 这里通过经纬度得到高度，计算很慢，应该调整成为结束绘制后再来计算高度
+      // for (var n = 0; n < terrainSamplePositions.length; n++) {
+      //   //地理坐标（弧度）转经纬度坐标
+      //   var m_cartographic = terrainSamplePositions[n];
+      //   // console.log(`output->m_cartographic`, m_cartographic);
+      //   // var height = $this.viewer.scene.globe.getHeight(m_cartographic);
+      //   var height = 500;
+      //   var point = $this.Cesium.Cartesian3.fromDegrees(
+      //     (m_cartographic.longitude / Math.PI) * 180,
+      //     (m_cartographic.latitude / Math.PI) * 180,
+      //     height
+      //   );
+      //   positions_Inter.push(point);
+      // }
+      // console.log(`output->positions_Inter`, positions_Inter);
+    }
+  }
+}
+
+export default DrawProFile;