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

package/src/packages/Cesium/materials/CircularDiffusionMaterialProperty.js

@@ -0,0 +1,98 @@
+/*
+ * @Date: 2023-07-21 15:15:32
+ * @LastEditors: zwt
+ * @LastEditTime: 2025-12-25 08:43:54
+ * @FilePath: .js
+ * @Description: 动态扩散
+ */
+import * as Cesium from 'cesium';
+
+export default class CircularDiffusionMaterialProperty {
+  constructor(options) {
+    this._definitionChanged = new Cesium.Event();
+    this._color = undefined;
+    this._colorSubscription = undefined;
+    this._time = (new Date()).getTime();
+    this.color = options.color;
+    this.duration = options.duration;
+  };
+
+  get isConstant() {
+    return false;
+  }
+
+  get definitionChanged() {
+    return this._definitionChanged;
+  }
+
+  getType(time) {
+    return Cesium.Material.CircularDiffusionMaterialType;
+  }
+
+  getValue(time, result) {
+    if (!Cesium.defined(result)) {
+      result = {};
+    }
+
+    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
+    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+    return result;
+  }
+
+  equals(other) {
+    return (this === other ||
+      (other instanceof CircularDiffusionMaterialProperty &&
+        Property.equals(this._color, other._color))
+    );
+  }
+}
+
+Object.defineProperties(CircularDiffusionMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+});
+
+// Cesium.CircularDiffusionMaterialProperty = CircularDiffusionMaterialProperty;
+Cesium.Material.CircularDiffusionMaterialProperty = 'CircularDiffusionMaterialProperty';
+Cesium.Material.CircularDiffusionMaterialType = 'CircularDiffusionMaterialType';
+Cesium.Material.CircularDiffusionMaterialSource =
+  `
+  czm_material czm_getMaterial(czm_materialInput materialInput)
+  {
+    czm_material material = czm_getDefaultMaterial(materialInput);
+    material.diffuse = 1.5 * color.rgb;
+    vec2 st = materialInput.st;
+    float dis = distance(st, vec2(0.5, 0.5));
+    float per = fract(time);
+    if(dis > per * 0.5){
+      material.alpha = 0.0;
+      discard;
+    }else {
+      material.alpha = color.a  * dis / per / 1.0;
+    }
+    return material;
+  }
+  `;
+
+Cesium.Material._materialCache.addMaterial(Cesium.Material.CircularDiffusionMaterialType, {
+  fabric: {
+    type: Cesium.Material.CircularDiffusionMaterialType,
+    uniforms: {
+      color: new Cesium.Color(1.0, 0.0, 0.0, 1),
+      time: 0
+    },
+    source: Cesium.Material.CircularDiffusionMaterialSource
+  },
+  translucent: function (material) {
+    return true;
+  }
+});
+// console.log('成功加载扩散圆材质');
+
+
+// ? 如何使用
+// import CircularDiffusionMaterialProperty from '@/packages/utils/Material/CircularDiffusionMaterialProperty.js'
+
+// material: new CircularDiffusionMaterialProperty({
+//   color: new Cesium.Color(1.0, 1.0, 0.0, 0.8),
+//   duration: 3000,
+// })

package/src/packages/Cesium/materials/CircularRippleMaterialProperty.js

@@ -0,0 +1,126 @@
+/*
+ * @Date: 2023-07-21 15:15:32
+ * @LastEditors: 傅霄玮
+ * @LastEditTime: 2024-07-26 17:06:24
+ * @FilePath: .js
+ * @Description: 动态扩散
+ */
+import * as Cesium from 'cesium';
+
+export default class CircularRippleMaterialProperty {
+  constructor(options) {
+    this._definitionChanged = new Cesium.Event();
+    this._color = undefined;
+    this._colorSubscription = undefined;
+    this._time = (new Date()).getTime();
+    this.color = options.color;
+    this.duration = options.duration;
+  };
+
+  get isConstant() {
+    return false;
+  }
+
+  get definitionChanged() {
+    return this._definitionChanged;
+  }
+
+  getType(time) {
+    return Cesium.Material.CircularRippleMaterialType;
+  }
+
+  getValue(time, result) {
+    if (!Cesium.defined(result)) {
+      result = {};
+    }
+
+    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
+    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
+    return result;
+  }
+
+  equals(other) {
+    return (this === other ||
+      (other instanceof CircularRippleMaterialProperty &&
+        Property.equals(this._color, other._color))
+    );
+  }
+}
+
+Object.defineProperties(CircularRippleMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color'),
+});
+
+// Cesium.CircularRippleMaterialProperty = CircularRippleMaterialProperty;
+Cesium.Material.CircularRippleMaterialProperty = 'CircularRippleMaterialProperty';
+Cesium.Material.CircularRippleMaterialType = 'CircularRippleMaterialType';
+Cesium.Material.CircularRippleMaterialSource =
+  `
+  czm_material czm_getMaterial(czm_materialInput materialInput)
+  {
+      czm_material material = czm_getDefaultMaterial(materialInput);
+      material.diffuse = 1.5 * color.rgb;
+      vec2 st = materialInput.st;
+      float dis = distance(st, vec2(0.5, 0.5));
+      float per = fract(czm_frameNumber * time / 1000.0);
+      if(count == 1.0){
+          if(dis > per * 0.5){
+              discard;
+          }else {
+              material.alpha = color.a  * dis / per / 2.0;
+          }
+      } else {
+          vec3 str = materialInput.str;
+          if(abs(str.z)  > 0.001){
+              discard;
+          }
+          if(dis > 0.5){
+              discard;
+          }else {
+              float perDis = 0.5 / count;
+              float disNum;
+              float bl = 0.0;
+              for(int i = 0; i <= 999; i++){
+                  if(float(i) <= count){
+                      disNum = perDis * float(i) - dis + per / count;
+                      if(disNum > 0.0){
+                          if(disNum < perDis){
+                              bl = 1.0 - disNum / perDis;
+                          }else if(disNum - perDis < perDis){
+                              bl = 1.0 - abs(1.0 - disNum / perDis);
+                          }
+                          material.alpha = pow(bl,(1.0 + 10.0 * (1.0 - gradient)));
+                      }
+                  }
+              }
+          }
+      }
+      return material;
+  }
+  `;
+
+Cesium.Material._materialCache.addMaterial(Cesium.Material.CircularRippleMaterialType, {
+  fabric: {
+    type: Cesium.Material.CircularRippleMaterialType,
+    uniforms: {
+      color: new Cesium.Color(1.0, 0.0, 0.0, 1),
+      time: 0,
+      count: 2,
+      gradient: 0.2
+    },
+    source: Cesium.Material.CircularRippleMaterialSource
+  },
+  translucent: function (material) {
+    return true;
+  }
+});
+// console.log('成功加载扩散圆材质');
+
+
+// ? 如何使用
+// import CircularRippleMaterialProperty from '@/packages/utils/Material/CircularRippleMaterialProperty.js'
+
+// material: new CircularRippleMaterialProperty({
+//   color: new Cesium.Color(1.0, 1.0, 0.0, 0.8),
+//   duration: 3000,
+// })

package/src/packages/Cesium/materials/PolylineArrowMaterialProperty.js

@@ -0,0 +1,109 @@
+/**
+ * PolylineArrowMaterialProperty
+ * @param {*} options
+ * @constructor
+ *
+ *流动箭头线
+ *
+ * how to use
+ *  let material = new PolylineArrowMaterialProperty({
+        color: Cesium.Color.RED,
+        duration: 1000
+    });
+    entity.polyline.material = material;
+ */
+import * as Cesium from 'cesium';
+
+function PolylineArrowMaterialProperty(options) {
+  options = options || {};
+  this._definitionChanged = new Cesium.Event();
+  this._color = undefined;
+  this._colorSubscription = undefined;
+  this.color = options.color || Cesium.Color.YELLOW;
+  this.duration = options.duration || 3000;
+  this._time = new Date().getTime();
+}
+
+Object.defineProperties(PolylineArrowMaterialProperty.prototype, {
+  isConstant: {
+    get: function () {
+      return false;
+    },
+  },
+  definitionChanged: {
+    get: function () {
+      return this._definitionChanged;
+    },
+  },
+  color: Cesium.createPropertyDescriptor("color"),
+});
+
+PolylineArrowMaterialProperty.prototype.getType = function (time) {
+  return "PolylineArrow";
+};
+
+PolylineArrowMaterialProperty.prototype.getValue = function (time, result) {
+  if (!Cesium.defined(result)) {
+    result = {};
+  }
+  result.color = Cesium.Property.getValueOrClonedDefault(
+    this._color,
+    time,
+    Cesium.Color.WHITE,
+    result.color
+  );
+  result.time =
+    ((new Date().getTime() - this._time) % this.duration) / this.duration;
+  return result;
+};
+
+PolylineArrowMaterialProperty.prototype.equals = function (other) {
+  return (
+    this === other ||
+    (other instanceof PolylineArrowMaterialProperty &&
+      Cesium.Property.equals(this.color, other.color))
+  );
+};
+
+Cesium.Material.PolylineArrowType = "PolylineArrow";
+
+// 在 Cesium 1.95 (Vue2项目里) 下，无法通过 import/require 的方式引入图片，会报错
+// 因此改用纯色箭头
+// Cesium.Material.PolylineArrowImage = "static/images/arrow.png";
+
+Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineArrowType, {
+  fabric: {
+    type: Cesium.Material.PolylineArrowType,
+    uniforms: {
+      color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
+      time: -20.0,
+    },
+    source: `
+        czm_material czm_getMaterial(czm_materialInput materialInput) {
+            czm_material material = czm_getDefaultMaterial(materialInput);
+            vec2 st = materialInput.st;
+            float t = fract(st.s * 2.0 - time);
+            float alpha = 1.0;
+            float width = 0.1;
+
+            if (t < (1.0 - width)) {
+                alpha = step(0.5 - width / 2.0, st.t) - step(0.5 + width / 2.0, st.t);
+            } else {
+                float headWidth = width * 2.0;
+                float headHeight = width * 2.0;
+                float k = (headHeight / headWidth) * (t - 1.0 + headWidth);
+                alpha = step(0.5 - k, st.t) - step(0.5 + k, st.t);
+            }
+
+            material.diffuse = color.rgb;
+            material.alpha = alpha * color.a;
+            return material;
+        }
+    `,
+  },
+  translucent: function (material) {
+    return material.uniforms.color.alpha < 1.0;
+  },
+});
+
+export default PolylineArrowMaterialProperty;

package/src/packages/Cesium/utils/MeasureHeight.js

@@ -0,0 +1,261 @@
+//高度测量类
+export default class MeasureHeight {
+  constructor(viewer) {
+    this.viewer = viewer;
+    this.initEvents();
+    this.positions = [];
+    this.vertexEntities = [];
+    this.labelEntity = undefined;
+    this.measureHeight = 0; //测量结果
+  }
+
+  //初始化事件
+  initEvents() {
+    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+    this.MeasureStartEvent = new Cesium.Event(); //开始事件
+    this.MeasureEndEvent = new Cesium.Event(); //结束事件        
+  }
+
+  //激活
+  activate() {
+    this.deactivate();
+    this.registerEvents(); //注册鼠标事件  
+    //设置鼠标状态 
+    this.viewer.enableCursorStyle = false;
+    this.viewer._element.style.cursor = 'default';
+    this.isMeasure = true;
+    this.circleRadius = 0.1;
+    this.measureHeight = 0;
+    this.positions = [];
+  }
+
+  //禁用
+  deactivate() {
+    if (!this.isMeasure) return;
+    this.unRegisterEvents();
+    this.viewer._element.style.cursor = 'pointer';
+    this.viewer.enableCursorStyle = true;
+    this.isMeasure = false;
+  }
+
+  //清空绘制
+  clear() {
+    //清除线对象
+    this.viewer.entities.remove(this.lineEntity);
+    this.lineEntity = undefined;
+
+    //清除文本
+    this.viewer.entities.remove(this.labelEntity);
+    this.labelEntity = undefined;
+
+    //移除圆
+    this.removeCircleEntity();
+
+    //清除节点
+    this.vertexEntities.forEach(item => {
+      this.viewer.entities.remove(item);
+    });
+    this.vertexEntities = [];
+  }
+
+  //创建线对象
+  createLineEntity() {
+    this.lineEntity = this.viewer.entities.add({
+      polyline: {
+        positions: new Cesium.CallbackProperty(e => {
+          return this.positions;
+        }, false),
+        width: 2,
+        material: Cesium.Color.YELLOW,
+        depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
+          color: Cesium.Color.RED,
+        }),
+      }
+    });
+  }
+
+  //创建结果文本标签
+  createLabel() {
+    this.labelEntity = this.viewer.entities.add({
+      position: new Cesium.CallbackProperty(e => {
+        return this.positions[this.positions.length - 1]; //返回最后一个点
+      }, false),
+      label: {
+        text: "",
+        // scale: 0.5,
+        font: 'normal 40px MicroSoft YaHei',
+        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
+        scaleByDistance: new Cesium.NearFarScalar(500, 1, 1500, 0.4),
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+        pixelOffset: new Cesium.Cartesian2(0, -30),
+        outlineWidth: 9,
+        outlineColor: Cesium.Color.WHITE,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 新增，禁用深度
+      }
+    });
+  }
+
+  //创建线节点
+  createVertex(index) {
+    let vertexEntity = this.viewer.entities.add({
+      position: new Cesium.CallbackProperty(e => {
+        return this.positions[index];
+      }, false),
+      type: "MeasureHeightVertex",
+      point: {
+        color: Cesium.Color.FUCHSIA,
+        pixelSize: 6,
+        // disableDepthTestDistance: 2000,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 新增，禁用深度
+      },
+    });
+    this.vertexEntities.push(vertexEntity);
+  }
+
+  //创建圆 这样方便看出水平面的高低
+  createCircleEntitiy() {
+    // 计算点的高度
+    function positionHeight(position) {
+      // 使用 Cesium 来计算 Cartesian3 点的高度
+      const cartographic = Cesium.Cartographic.fromCartesian(position);
+      return cartographic.height;
+    }
+    this.circleEntity = this.viewer.entities.add({
+      position: new Cesium.CallbackProperty(e => {
+        return this.positions[this.positions.length - 1]; //返回最后一个点
+      }, false),
+      ellipse: {
+        height: new Cesium.CallbackProperty(e => {
+          return positionHeight(this.positions[this.positions.length - 1]);
+        }, false),
+        // semiMinorAxis: new Cesium.CallbackProperty(e => {
+        //   return this.circleRadius;
+        // }, false),
+        // semiMajorAxis: new Cesium.CallbackProperty(e => {
+        //   return this.circleRadius;
+        // }, false),
+        semiMajorAxis: 300.0,
+        semiMinorAxis: 200.0,
+        material: Cesium.Color.YELLOW.withAlpha(0.5),
+        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 新增，禁用深度
+      },
+    });
+  }
+
+  //删除圆
+  removeCircleEntity() {
+    this.viewer.entities.remove(this.circleEntity);
+    this.circleEntity = undefined;
+  }
+
+  //注册鼠标事件
+  registerEvents() {
+    this.leftClickEvent();
+    this.rightClickEvent();
+    this.mouseMoveEvent();
+  }
+
+  //左键点击事件
+  leftClickEvent() {
+    //单击鼠标左键画点点击事件
+    this.handler.setInputAction(e => {
+      this.viewer._element.style.cursor = 'default';
+      let position = this.viewer.scene.pickPosition(e.position);
+      if (!position) {
+        const ellipsoid = this.viewer.scene.globe.ellipsoid;
+        position = this.viewer.scene.camera.pickEllipsoid(e.position, ellipsoid);
+      }
+      if (!position) return;
+
+      if (this.positions.length == 0) { //首次点击
+        this.positions.push(position);
+        this.createVertex(0);
+        this.createLineEntity();
+        this.createCircleEntitiy();
+        this.createLabel();
+      } else { //第二次点击结束测量
+        this.measureEnd();
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  }
+
+  //鼠标移动事件
+  mouseMoveEvent() {
+    this.handler.setInputAction(e => {
+      if (!this.isMeasure) return;
+      this.viewer._element.style.cursor = 'default';
+      let position = this.viewer.scene.pickPosition(e.endPosition);
+      if (!position) {
+        position = this.viewer.scene.camera.pickEllipsoid(e.startPosition, this.viewer.scene.globe.ellipsoid);
+      }
+      if (!position) return;
+      this.handleMoveEvent(position);
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  }
+
+  //处理鼠标移动
+  handleMoveEvent(position) {
+
+    // 计算两点的水平距离
+    function getDistanceH(point1, point2) {
+      // 获取两个点的 Cartographic 经纬度坐标
+      const cartographic1 = Cesium.Cartographic.fromCartesian(point1);
+      const cartographic2 = Cesium.Cartographic.fromCartesian(point2);
+      // 计算经纬度平面上的水平距离
+      const geodesic = new Cesium.EllipsoidGeodesic(cartographic1, cartographic2);
+      return geodesic.surfaceDistance;
+    }
+
+    // 将 Cartesian3 点转换为经纬度和高度数组
+    function cartesian3Point3(position) {
+      // 将 Cartesian3 转换为 Cartographic，并返回经度、纬度、高度数组
+      const cartographic = Cesium.Cartographic.fromCartesian(position);
+      return [
+        Cesium.Math.toDegrees(cartographic.longitude),
+        Cesium.Math.toDegrees(cartographic.latitude),
+        cartographic.height
+      ];
+    }
+
+    if (this.positions.length < 1) return;
+    let firstPoint = cartesian3Point3(this.positions[0]); //第一个点
+    let movePoint = cartesian3Point3(position); //鼠标移动点
+    const h = movePoint[2] - firstPoint[2];
+    firstPoint[2] = movePoint[2];
+    const twoPosition = Cesium.Cartesian3.fromDegrees(firstPoint[0], firstPoint[1], movePoint[2]);
+    if (this.positions.length < 2) {
+      this.positions.push(twoPosition);
+      this.createVertex(1);
+    } else {
+      this.positions[1] = twoPosition;
+      this.measureHeight = h.toFixed(3);
+      this.labelEntity.label.text = "高度：" + this.measureHeight + " 米";
+    }
+    //计算圆的半径   
+    this.circleRadius = getDistanceH(this.positions[0], position);
+  }
+
+  //右键事件
+  rightClickEvent() {
+    this.handler.setInputAction(e => {
+      if (this.isMeasure) {
+        this.deactivate();
+        this.clear();
+      }
+    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+  }
+
+  //测量结束
+  measureEnd() {
+    this.deactivate();
+    this.MeasureEndEvent.raiseEvent(this.measureHeight); //触发结束事件 传入结果
+  }
+
+  //解除鼠标事件
+  unRegisterEvents() {
+    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  }
+}