线贴图 速度bug修改

src/Obj/Base/PolylineObject/_element.js

@@ -96,10 +96,9 @@ function html(that) {
                             <input class="btn-switch" type="checkbox" @model="rotate">
                         </div>
                         <div class="col" style="flex: 0 0 33%;">
-                            <span class="label">动画时长</span>
+                            <span class="label">流动速率</span>
                             <div class="input-number input-number-unit-1" style="width: 80px;">
-                                <input class="input" type="number" title="" min="0" max="999999" step="0.1" @model="speed">
+                                <input class="input" type="number" title="" min="0" max="999999" step="1" @model="speed">
-                                <span class="unit">s</span>
                                 <span class="arrow"></span>
                             </div>
                         </div>

src/Obj/Base/PolylineObject/index.js

@@ -177,7 +177,8 @@ class PolylineObject extends Base {
   }
 
   set speed(v) {
-    this.options.speed = v
+    // this.options.speed = v
+    this.options.speed = v !== 0 ? Math.pow(v, -1) * 100 : 0
     this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
   }
   get dashSize() {
@@ -1321,6 +1322,7 @@ class PolylineObject extends Base {
       }
     })
     that.entity.polyline.oriWidth = that.options.width
+    that.judgeLine(that.entity, that.options)
     that.sdk._entityZIndex++
     PolylineObject.createLabel(that)
     // that.entity.polyline.positionsLngLat = positions
@@ -1355,7 +1357,102 @@ class PolylineObject extends Base {
 
     let scene = that.sdk.viewer.scene
   }
+  judgeLine(entity, newParam) {
+    if (!entity.polyline.oriRepeat) {
+      let param = {
+        color: newParam.color,
+        image: this.getSourceRootPath() + `/img/arrow/1.png`,
+        space: newParam.space,
+        speed: newParam.speed
+      }
 
+      param.speed = newParam.rotate ? param.speed : 0 - param.speed
+
+      const canvasEle = document.createElement('canvas');
+      const ctx = canvasEle.getContext('2d')
+      const myImg = new Image()
+      // myImg.src = that.getSourceRootPath() + '/img/arrow/1.png'
+      myImg.src = param.image
+      let that = this
+      myImg.onload = function () {
+        canvasEle.width = myImg.width * (param.space + 1)
+        canvasEle.height = myImg.height
+
+        let oriRepeat = that.getSceenLine(entity, param, canvasEle)
+        oriRepeat && (entity.polyline.oriRepeat = oriRepeat)
+
+
+        var positionProperty = entity.polyline.positions;
+        var positions = positionProperty.getValue(that.sdk.viewer.clock.currentTime);
+
+        if (!Cesium.defined(positions)) {
+          return new Cesium.Cartesian2(1.0, 1.0);
+          // return 1.0;
+        }
+
+        var distance = 0;
+        for (var i = 0; i < positions.length - 1; ++i) {
+          distance += Cesium.Cartesian3.distance(positions[i], positions[i + 1]);
+        }
+
+        var repeatX = distance / entity.polyline.width.getValue();
+        // 根据地图缩放程度调整repeatX
+        var cameraHeight = that.sdk.viewer.camera.positionCartographic.height;
+        var boundingSphere = new Cesium.BoundingSphere(
+          new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标
+          500000 // 半径（距离）
+        );
+
+        // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率）
+        var drawingBufferWidth = that.sdk.viewer.canvas.clientWidth;
+        var drawingBufferHeight = that.sdk.viewer.canvas.clientHeight;
+
+        // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
+        var groundResolution = that.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
+        repeatX *= groundResolution / cameraHeight / (param.space * (canvasEle.width / canvasEle.height * 5) + 1);
+        // if (entity.polyline.material.oriRepeat) {
+        let speed = repeatX / entity.polyline.oriRepeat
+        entity.polyline.oriSpeed = speed
+        entity.polyline.oriRepeatX = repeatX
+      }
+
+
+
+
+    }
+  }
+  /**获取当前满屏横线速度 */
+  getSceenLine(entity, options, canvasEle) {
+    let point1 = new Cesium.Cartesian2(0, this.sdk.viewer.canvas.clientHeight)
+    let point2 = new Cesium.Cartesian2(this.sdk.viewer.canvas.clientWidth / 2, this.sdk.viewer.canvas.clientHeight)
+    var cartesian1 = this.sdk.viewer.scene.pickPosition(point1)
+    var cartesian2 = this.sdk.viewer.scene.pickPosition(point2)
+
+    var distance = Cesium.Cartesian3.distance(cartesian1, cartesian2);
+
+    var repeatX = distance / entity.polyline.width.getValue();
+    // 根据地图缩放程度调整repeatX
+    var cameraHeight = this.sdk.viewer.camera.positionCartographic.height;
+    var boundingSphere = new Cesium.BoundingSphere(
+      new Cesium.Cartesian3(-1000000, 0, 0), // 中心点坐标
+      500000 // 半径（距离）
+    );
+
+    // 获取绘图缓冲区的宽度和高度（通常是屏幕的分辨率）
+    var drawingBufferWidth = this.sdk.viewer.canvas.clientWidth;
+    var drawingBufferHeight = this.sdk.viewer.canvas.clientHeight;
+
+    // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
+    var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
+    // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
+    if (groundResolution > 700) {
+      repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
+    } else {
+      repeatX = undefined;
+    }
+
+    return repeatX
+  }
   /**
    * 编辑框
    * @param {boolean} state true打开，false关闭

src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js

@@ -10,12 +10,14 @@ function FlowDashedLine() {
       this._uType = undefined;
       this._space = undefined;
       this._dashSize = undefined;
+      this._scale = undefined;
       this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
       this.speed = options.speed != undefined ? options.speed : 1.0;//速度
       this.space = options.space || 0.0;//速度
       this.dashSize = options.dashSize || 0.03;//速度
       this.uType = options.uType === undefined ? 1 : options.uType;//类型：0：普通流动线 1：虚化虚线
       this.lineBackAlpha = options.lineBackAlpha || 0.05;
+      this.scale = options.scale || 1.0;
     }
 
     get isConstant() {
@@ -65,6 +67,12 @@ function FlowDashedLine() {
         1,
         result.uType
       );
+      result.scale = Cesium.Property.getValueOrDefault(
+        this._scale,
+        time,
+        1.0,
+        result.scale
+      );
       result.lineBackAlpha = this.lineBackAlpha;
       result.frameNumber = Cesium.getTimestamp();
       return result;
@@ -77,7 +85,8 @@ function FlowDashedLine() {
           Cesium.Property.equals(this._color, other._color) &&
           Cesium.Property.equals(this._speed, other.speed) &&
           Cesium.Property.equals(this._uType, other.uType) &&
-          Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
+          Cesium.Property.equals(this._lineBackAlpha, other.lineBackAlpha) &&
+          Cesium.Property.equals(this._scale, other.scale))
       );
     }
   }
@@ -89,6 +98,7 @@ function FlowDashedLine() {
     dashSize: Cesium.createPropertyDescriptor("dashSize"),
     uType: Cesium.createPropertyDescriptor("uType"),
     transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
+    scale: Cesium.createPropertyDescriptor("scale"),
   });
 
   Cesium.FlowDashedLineFlowMaterialProperty = FlowDashedLineFlowMaterialProperty;
@@ -108,7 +118,7 @@ function FlowDashedLine() {
             float dashSize = 0.1;
             float gapSize = space;
             // speed现在表示完成一次完整动画循环的秒数
-            float progress = speed==0.0 ? 0.0 : fract(frameNumber / 1000.0 / speed);
+            float progress = speed==0.0 ? 0.0 : fract(frameNumber / 1000.0 / speed * scale);
             float pattern = fract(st.x / dashSize * (1.0 + gapSize) + progress / dashSize * (1.0 + gapSize));
             float dash1 = step(0.0, pattern) - step(1.0/(1.0 + gapSize), pattern);
             float dash2 = smoothstep(0.0, 0.2, pattern) -
@@ -131,6 +141,7 @@ function FlowDashedLine() {
           color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
           speed: 1,
           space: 0.0,
+          scale: 1.0,
           dashSize: 0.03,
           frameNumber: Cesium.getTimestamp(),
           uType: 1,

src/Tools/index.js

@@ -586,6 +586,17 @@ class Tools {
 
   getMaterial(color = '#2ab0c2', type = 0, entity = null, newParam = {}) {
     let material = ''
+    let arr = {
+      '7': 10,
+      '8': 3,
+      '9': 4,
+      '10': 4,
+      '11': 4,
+      '12': 2
+    }
+    if (entity) {
+      arr[type + ''] ? (entity.polyline.width = entity.polyline.oriWidth + arr[type + '']) : (entity.polyline.width = entity.polyline.oriWidth)
+    }
 
     switch (Number(type)) {
 
@@ -616,22 +627,48 @@ class Tools {
         })
         break
       case 5: //普通流动虚线
-        material = new Cesium.FlowDashedLineFlowMaterialProperty({
+      // material = new Cesium.FlowDashedLineFlowMaterialProperty({
-          color: color,
+      //   color: color,
-          uType: 0,
+      //   uType: 0,
-          speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+      //   speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
-          // dashSize: newParam.dashSize,
+      //   // dashSize: newParam.dashSize,
-          space: newParam.space
+      //   space: newParam.space,
-        })
+      //   scale: 1.0
-        break
+      // })
+      // break
       case 6: //流动虚线2
+        let that = this
+
         material = new Cesium.FlowDashedLineFlowMaterialProperty({
           color: color,
-          uType: 1,
+          uType: type == 5 ? 0 : 1,
           speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
           // dashSize: newParam.dashSize,
-          space: newParam.space
+          space: newParam.space,
+          scale: new Cesium.CallbackProperty(function () {
+            var oriPositions = entity.polyline.positions.getValue();
+
+            if (!Cesium.defined(oriPositions)) {
+              return 1.0;
+            }
+            var distance = 0;
+            for (var i = 0; i < oriPositions.length - 1; ++i) {
+              distance += Cesium.Cartesian3.distance(oriPositions[i], oriPositions[i + 1]);
+            }
+            //屏幕坐标
+            let point1 = new Cesium.Cartesian2(0, that.sdk.viewer.canvas.clientHeight)
+            let point2 = new Cesium.Cartesian2(that.sdk.viewer.canvas.clientWidth / 2, that.sdk.viewer.canvas.clientHeight)
+            var cartesian1 = that.sdk.viewer.scene.pickPosition(point1)
+            var cartesian2 = that.sdk.viewer.scene.pickPosition(point2)
+
+            var distance2 = Cesium.Cartesian3.distance(cartesian1, cartesian2);
+
+            let repeatX = distance2 * 2 / distance
+
+            return repeatX;
+          })
         })
+
         break
       case 7: //流动箭头1
       case 8: //流动箭头2
@@ -645,20 +682,8 @@ class Tools {
           space: newParam.space,
           speed: newParam.speed
         }
-        let arr = {
-          '7': 10,
-          '8': 3,
-          '9': 4,
-          '10': 4,
-          '11': 4,
-          '12': 2
-        }
-
 
         param.speed = newParam.rotate ? param.speed : 0 - param.speed
-        entity.polyline.width = entity.polyline.oriWidth + arr[type + '']
-
-
 
         this.getFlowTexture(this, param, entity)
 
@@ -669,6 +694,7 @@ class Tools {
     }
     return material
   }
+
   getFlowTexture(that, options, entity) {
 
     const canvasEle = document.createElement('canvas');
@@ -698,15 +724,13 @@ class Tools {
       // }, false)
       // entity.polyline.material.oriRepeat = that.getSceenLine(entity, options, canvasEle)
       // entity.polyline.material.oriSpeed = undefined
+      let beforeSpeed = 0, repeat = 0
       entity.polyline.material = new Cesium.LineTextureMaterialProperty(
         {
           color: options.color,
-          // image: options.image,
           image: canvasEle,
           speed: options.speed,
-          // repeat: repeat
           repeat: new Cesium.CallbackProperty(function () {
-            // function getRepeat() {
             var positionProperty = entity.polyline.positions;
             var positions = positionProperty.getValue(that.sdk.viewer.clock.currentTime);
 
@@ -734,24 +758,30 @@ class Tools {
 
             // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
             var groundResolution = that.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
-            // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
+            let result
-            repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
+            if (groundResolution > 700) {
-            let speed
+              repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
-            if (entity.polyline.material.oriRepeat) {
+              // if (entity.polyline.material.oriRepeat) {
-              speed = repeatX / entity.polyline.material.oriRepeat
+              let speed = repeatX / entity.polyline.oriRepeat
+              entity.polyline.oriSpeed = speed
+              entity.polyline.oriRepeatX = repeatX
+              // } else {
+              //   entity.polyline.material.oriRepeat = repeatX
+              // }
+              beforeSpeed = speed
+              repeat = repeatX
+              result = new Cesium.Cartesian2(repeatX, speed || 1.0)
             } else {
-              entity.polyline.material.oriRepeat = repeatX
+              result = new Cesium.Cartesian2(repeat || entity.polyline.oriRepeatX, beforeSpeed || entity.polyline.oriSpeed)
             }
-            // if (repeatX < 3) {
+
-            //   repeatX = 3
+            return result;
-            // }
-            return new Cesium.Cartesian2(repeatX, speed || 1.0);
             // return repeatX;
           })
         }
       )
-      // entity.polyline.material.oriSpeed = options.speed
+      let oriRepeat = that.getSceenLine(entity, options, canvasEle)
-      entity.polyline.material.oriRepeat = that.getSceenLine(entity, options, canvasEle)
+      oriRepeat && (entity.polyline.oriRepeat = oriRepeat)
     }
   }
   /**获取当前满屏横线速度 */
@@ -778,8 +808,13 @@ class Tools {
     // 使用 getPixelSize 方法获取包围球在屏幕上的像素大小
     var groundResolution = this.sdk.viewer.scene.camera.getPixelSize(boundingSphere, drawingBufferWidth, drawingBufferHeight)
     // repeatX *= groundResolution / cameraHeight / ((myImg.width / myImg.height * 5) + 1);
-    repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
+    if (groundResolution > 700) {
-    return repeatX * 2
+      repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
+    } else {
+      repeatX = undefined;
+    }
+
+    return repeatX
   }
 
   /*创建直箭头图片*/