线样式（无同步间距调节）

src/Obj/Base/PolylineObject/_element.js

@@ -1,7 +1,7 @@
 import { attributeElm, labelStyleElm1, labelStyleElm2 } from '../../Element/elm_html'
 
 function html(that) {
-    return `
+  return `
     <span class="custom-divider"></span>
     <div class="div-item">
         <div class="row" style="align-items: flex-start;">
@@ -97,6 +97,28 @@ function html(that) {
                         <div class="col">
                         </div>
                     </div>
+                    <div class="row" id="dashTextureDom">
+                        <div class="col">
+                            <span class="label">动画顺向</span>
+                            <input class="btn-switch" type="checkbox" @model="rotate">
+                        </div>
+                        <div class="col">
+                            <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">
+                                <span class="arrow"></span>
+                            </div>
+                        </div>
+                        <div class="col" >
+                            <span id="lineSpace">
+                              <span class="label">间距</span>
+                              <div class="input-number input-number-unit-1" style="width: 80px;">
+                                  <input class="input" type="number" title="" min="0" max="3" step="0.1" @model="space">
+                                  <span class="arrow"></span>
+                              </div>
+                            </span>
+                        </div>
+                    </div>
                     <div class="row">
                         <div class="col">
                             <span class="label">线段缓冲</span>

src/Obj/Base/PolylineObject/index.js

@@ -57,6 +57,10 @@ class PolylineObject extends Base {
     this.options['nose-to-tail'] = options['nose-to-tail'] || false
     this.options.smooth = options.smooth || false
     this.options.extend = options.extend || false
+    this.options.rotate = options.rotate || true
+    this.options.space = options.space || 0.1
+    this.options.speed = options.speed || 1
+    this.options.dashSize = options.dashSize || 0.03
     this.options['length-unit'] = options['length-unit'] || '米'
     this.options['fit-length-unit'] = options['fit-length-unit'] || '米'
     this.options['extend-width'] =
@@ -144,7 +148,7 @@ class PolylineObject extends Base {
   }
   set color(v) {
     this.options.color = v
-    this.entity.polyline.material = this.getMaterial(v, this.options.type)
+    this.entity.polyline.material = this.getMaterial(v, this.options.type, this.entity, this.options)
     if (this._elms.color) {
       this._elms.color.forEach((item, i) => {
         let colorPicker = new ewPlugins('colorpicker', {
@@ -166,6 +170,48 @@ class PolylineObject extends Base {
     }
   }
 
+  get speed() {
+    return this.options.speed
+  }
+
+  set speed(v) {
+    this.options.speed = v
+    this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
+  }
+  get dashSize() {
+    return this.options.dashSize
+  }
+
+  set dashSize(v) {
+    this.options.dashSize = v
+    this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
+  }
+
+  get rotate() {
+    return this.options.rotate
+  }
+
+  set rotate(v) {
+    this.options.rotate = v
+    PolylineObject.closeNodeEdit(this)
+    this._elms.rotate &&
+      this._elms.rotate.forEach(item => {
+        item.checked = v
+      })
+
+    this.options.rotate = v
+    this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
+  }
+
+  get space() {
+    return this.options.space
+  }
+
+  set space(v) {
+    this.options.space = v
+    this.entity.polyline.material = this.getMaterial(this.options.color, this.options.type, this.entity, this.options)
+  }
+
   get length() {
     return this.options.length
   }
@@ -298,6 +344,31 @@ class PolylineObject extends Base {
         name: '流动箭头1',
         value: '流动箭头1',
         key: 7
+      },
+      {
+        name: '流动箭头2',
+        value: '流动箭头2',
+        key: 8
+      },
+      {
+        name: '流动箭头3',
+        value: '流动箭头3',
+        key: 9
+      },
+      {
+        name: '流动箭头4',
+        value: '流动箭头4',
+        key: 10
+      },
+      {
+        name: '流动箭头5',
+        value: '流动箭头5',
+        key: 11
+      },
+      {
+        name: '流动箭头6',
+        value: '流动箭头6',
+        key: 12
       }
     ]
     this.options.type = Number(v)
@@ -306,6 +377,16 @@ class PolylineObject extends Base {
         this._elms.lineType &&
           this._elms.lineType.forEach(item => {
             item.value = lineTypeData[i].value
+            if (2 < item.value && item.value < 13) {//贴图参数
+              document.getElementById('dashTextureDom').style.display = 'flex'
+            } else {
+              document.getElementById('dashTextureDom').style.display = 'none'
+            }
+            if (2 < item.value && item.value < 5) {//尾迹参数
+              document.getElementById('lineSpace').style.display = 'none'
+            } else {
+              document.getElementById('lineSpace').style.display = 'flex'
+            }
           })
         break
       }
@@ -314,7 +395,9 @@ class PolylineObject extends Base {
       this.entity.polyline &&
       (this.entity.polyline.material = this.getMaterial(
         this.options.color,
-        this.options.type
+        this.options.type,
+        this.entity,
+        this.options
       ))
   }
   get noseToTail() {
@@ -1177,7 +1260,7 @@ class PolylineObject extends Base {
         positions: Cesium.Cartesian3.fromDegreesArrayHeights(fromDegreesArray),
         width: that.options.width,
         clampToGround: ground,
-        material: that.getMaterial(that.options.color, that.options.type),
+        material: that.getMaterial(that.options.color, that.options.type, that.entity, that.options),
         zIndex: that.sdk._entityZIndex
       }
     })
@@ -1540,6 +1623,31 @@ class PolylineObject extends Base {
             name: '流动箭头1',
             value: '流动箭头1',
             key: 7
+          },
+          {
+            name: '流动箭头2',
+            value: '流动箭头2',
+            key: 8
+          },
+          {
+            name: '流动箭头3',
+            value: '流动箭头3',
+            key: 9
+          },
+          {
+            name: '流动箭头4',
+            value: '流动箭头4',
+            key: 10
+          },
+          {
+            name: '流动箭头5',
+            value: '流动箭头5',
+            key: 11
+          },
+          {
+            name: '流动箭头6',
+            value: '流动箭头6',
+            key: 12
           }
         ]
         let lineTypeDataLegpObject = legp(
@@ -1565,6 +1673,18 @@ class PolylineObject extends Base {
             for (let i = 0; i < lineTypeData.length; i++) {
               if (lineTypeData[i].value === lineTypeDataLegpElm.value) {
                 this.lineType = lineTypeData[i].key
+
+                //控制参数显隐
+                if (2 < this.lineType && this.lineType < 13) {//贴图参数
+                  document.getElementById('dashTextureDom').style.display = 'flex'
+                } else {
+                  document.getElementById('dashTextureDom').style.display = 'none'
+                }
+                if (2 < this.lineType && this.lineType < 5) {//尾迹参数
+                  document.getElementById('lineSpace').style.display = 'none'
+                } else {
+                  document.getElementById('lineSpace').style.display = 'flex'
+                }
                 break
               }
             }
@@ -1984,6 +2104,10 @@ class PolylineObject extends Base {
     this.attributeVr = this.options.attribute.vr.content
     this.attributeCamera = this.options.attribute.camera.content
     this.attributeGoods = this.options.attribute.goods.content
+    this.rotate = this.originalOptions.rotate
+    this.speed = this.originalOptions.speed
+    this.dashSize = this.originalOptions.dashSize
+    this.space = this.originalOptions.space
     this.cameraSelect && this.cameraSelect()
     this.goodsSelect && this.goodsSelect()
 

src/Obj/Materail/FlowDashedLineFlowMaterialProperty.js

@@ -8,8 +8,12 @@ function FlowDashedLine() {
       this._color = undefined;
       this._speed = undefined;
       this._uType = undefined;
+      this._space = undefined;
+      this._dashSize = undefined;
       this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
-      this.speed = options.speed || 0.25;//速度
+      this.speed = options.speed != undefined ? options.speed : 1.0;//速度
+      this.space = options.space || 0.01;//速度
+      this.dashSize = options.dashSize || 0.03;//速度
       this.uType = options.uType === undefined ? 1 : options.uType;//类型：0：普通流动线 1：虚化虚线
       this.lineBackAlpha = options.lineBackAlpha || 0.05;
     }
@@ -43,6 +47,18 @@ function FlowDashedLine() {
         10,
         result.speed
       );
+      result.space = Cesium.Property.getValueOrDefault(
+        this._space,
+        time,
+        10,
+        result.space
+      );
+      result.dashSize = Cesium.Property.getValueOrDefault(
+        this._dashSize,
+        time,
+        10,
+        result.dashSize
+      );
       result.uType = Cesium.Property.getValueOrDefault(
         this._uType,
         time,
@@ -69,6 +85,8 @@ function FlowDashedLine() {
   Object.defineProperties(FlowDashedLineFlowMaterialProperty.prototype, {
     color: Cesium.createPropertyDescriptor("color"),
     speed: Cesium.createPropertyDescriptor("speed"),
+    space: Cesium.createPropertyDescriptor("space"),
+    dashSize: Cesium.createPropertyDescriptor("dashSize"),
     uType: Cesium.createPropertyDescriptor("uType"),
     transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
   });
@@ -89,11 +107,13 @@ function FlowDashedLine() {
 
             // 计算流动虚线
             float dashSize = 0.03;
-            float gapSize = 0.01;
+            // float gapSize = 0.01;
-            float progress = fract(czm_frameNumber * 0.01); // 时间控制流动
+            // float dashSize = dashSize;
+            float gapSize = space;
+            float progress = fract(speed * czm_frameNumber * 0.01); // 时间控制流动
             float pattern = fract(st.x / (dashSize + gapSize) + progress);
             float dash1 = step(0.1, pattern) - step(0.9, pattern);
-            float dash2 = smoothstep(0.1, 0.3, pattern) - smoothstep(0.7, 0.9, pattern);
+            float dash2 = smoothstep(0.0, 0.4, pattern) - smoothstep(0.6, 1.0, pattern);
             float dash = (float(uType) != 1.0)?dash1:dash2;
             material.alpha = dash;
             material.diffuse = color.rgb;
@@ -108,7 +128,9 @@ function FlowDashedLine() {
         type: Cesium.Material.FlowDashedLineMaterialType,
         uniforms: {
           color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
-          speed: 0.1,
+          speed: 1,
+          space: 0.01,
+          dashSize: 0.03,
           uType: 1,
           lineBackAlpha: 0.05,
         },

src/Obj/Materail/LineTextureMaterialProperty.js

@@ -7,10 +7,12 @@ function LineTexture() {
       this._definitionChanged = new Cesium.Event();
       this._image = undefined;
       this._color = undefined;
-      this._imageW = undefined;
+      this._speed = undefined;
+      this._repeat = undefined;
       this.image = options.image || "";
       this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
-      this.imageW = options.imageW || 1;
+      this.speed = options.speed != undefined ? options.speed : 1.0;
+      this.repeat = options.repeat || 1.0;
     }
 
     get isConstant() {
@@ -41,11 +43,17 @@ function LineTexture() {
         Cesium.Color.RED,
         result.color
       );
-      result.imageW = Cesium.Property.getValueOrDefault(
+      result.speed = Cesium.Property.getValueOrDefault(
-        this._imageW,
+        this._speed,
         time,
-        1,
+        1.0,
-        result.imageW
+        result.speed
+      );
+      result.repeat = Cesium.Property.getValueOrDefault(
+        this._repeat,
+        time,
+        1.0,
+        result.repeat
       );
       return result;
     }
@@ -56,7 +64,8 @@ function LineTexture() {
         (other instanceof LineTextureMaterialProperty &&
           Cesium.Property.equals(this._image, other._image) &&
           Cesium.Property.equals(this._color, other._color) &&
-          Cesium.Property.equals(this._imageW, other._imageW))
+          Cesium.Property.equals(this._imageW, other._imageW) &&
+          Cesium.Property.equals(this._speed, other._speed))
       );
     }
   }
@@ -64,27 +73,27 @@ function LineTexture() {
   Object.defineProperties(LineTextureMaterialProperty.prototype, {
     image: Cesium.createPropertyDescriptor("image"),
     color: Cesium.createPropertyDescriptor("color"),
-    imageW: Cesium.createPropertyDescriptor("imageW"),
+    speed: Cesium.createPropertyDescriptor("speed"),
+    repeat: Cesium.createPropertyDescriptor("repeat"),
   });
 
   Cesium.LineTextureMaterialProperty = LineTextureMaterialProperty;
   Cesium.Material.LineTextureMaterialProperty = "LineTextureMaterialProperty";
   Cesium.Material.LineTextureMaterialType = "LineTextureMaterialType";
   Cesium.Material.LineTextureMaterialSource = `
-        #extension GL_OES_standard_derivatives : enable
+        uniform vec4 color;
+        uniform sampler2D image;
+        uniform float speed;
+        uniform float repeat;
         czm_material czm_getMaterial(czm_materialInput materialInput)
         {
-            czm_material m = czm_getDefaultMaterial(materialInput);
+          czm_material material = czm_getDefaultMaterial(materialInput);
-
+          vec2 st = materialInput.st;
-
+          st.s *= repeat; // 关键：通过repeat控制纹理密度
-            vec2 st = materialInput.st * vec2(494/172, 1.0); // 横向重复两次
+          vec4 colorImage = texture2D(image, vec2(fract(st.s + speed*czm_frameNumber* 0.01), st.t));
-            vec2 uv = vec2(fract(st.s + uTime*0.1), st.t);
+          material.alpha = colorImage.a * color.a;
-            // uv.y = mix(uv.y, 1.0-uv.y, step(0.5, fract(uTime))); // 周期性反转Y轴
+          material.diffuse = color.rgb;
-            vec4 tex = texture(image, uv);
+          return material;
-            m.diffuse =(tex.rgb+color.rgb)/2.0;
-            m.alpha = tex.a * (1.0 - fract(st.t)) * color.a; // 顶部渐隐
-
-            return m;
         }
        `;
   Cesium.Material._materialCache.addMaterial(
@@ -95,7 +104,8 @@ function LineTexture() {
         uniforms: {
           color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
           image: '',
-          imageW: 1,
+          repeat: 1.0,
+          speed: 1.0,
           uTime: 1
         },
         source: Cesium.Material.LineTextureMaterialSource,

src/Obj/Materail/PolylineFlowMaterialProperty.js

@@ -7,9 +7,11 @@ function PolylineFlow() {
       this._definitionChanged = new Cesium.Event();
       this._color = undefined;
       this._speed = undefined;
+      this._rotate = undefined;
       this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
-      this.speed = options.speed || 0.25;//速度
+      this.speed = options.speed != undefined ? options.speed : 1.0;//速度
       this.lineBackAlpha = options.lineBackAlpha || 0.05;
+      this.rotate = options.rotate;
     }
 
     get isConstant() {
@@ -41,6 +43,12 @@ function PolylineFlow() {
         10,
         result.speed
       );
+      result.rotate = Cesium.Property.getValueOrDefault(
+        this._rotate,
+        time,
+        true,
+        result.rotate
+      );
       result.lineBackAlpha = this.lineBackAlpha;
       result.frameNumber = Cesium.getTimestamp();
       return result;
@@ -60,6 +68,7 @@ function PolylineFlow() {
   Object.defineProperties(PolylineFlowMaterialProperty.prototype, {
     color: Cesium.createPropertyDescriptor("color"),
     speed: Cesium.createPropertyDescriptor("speed"),
+    rotate: Cesium.createPropertyDescriptor("rotate"),
     transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
   });
 
@@ -78,11 +87,16 @@ function PolylineFlow() {
             //获取st（uv）
             vec2 st = materialInput.st;
             //获取当前帧数，10秒内变化0-1
-            float time = fract(czm_frameNumber * speed / 60.0);
+            // float time = fract(czm_frameNumber * speed / 60.0);
+            float time = fract(abs(speed) * czm_frameNumber * 0.01);
             //长度1/10
-            time = time * (1.0 + 0.1);
+            // time = time * (1.0 + 0.1);
+            float staticAlpha = rotate?smoothstep(0.0,1.0, 1.0-st.s) * step(-1.0,-(1.0-st.s)):smoothstep(0.0,1.0, st.s) * step(-1.0,-st.s);
+
             //平滑过渡函数
-            float alpha = smoothstep(time-0.1,time,st.s) * step(-time,-st.s);
+            float alpha1 = smoothstep(time-0.1,time,1.0-st.s) * step(-time,- (1.0-st.s));
+            float alpha2 = smoothstep(time-0.1,time,st.s) * step(-time,- st.s);
+            float alpha =(speed== 0.0)? staticAlpha:(speed < 0.0)?alpha2:alpha1;
             //光带轨迹（不会完全透明）
             alpha += lineBackAlpha;
             material.alpha = alpha;
@@ -99,6 +113,7 @@ function PolylineFlow() {
         uniforms: {
           color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
           speed: 0.1,
+          rotate: true,
           lineBackAlpha: 0.05,
         },
         source: Cesium.Material.PolylineFlowMaterialSource,

src/Obj/Materail/PolylineFlowMultMaterialProperty.js

@@ -7,9 +7,11 @@ function PolylineFlowMult() {
       this._definitionChanged = new Cesium.Event();
       this._color = undefined;
       this._speed = undefined;
+      this._rotate = undefined;
       this.color = new Cesium.Color.fromCssColorString(options.color || "rgba(255,255,255,1)");
-      this.speed = options.speed || 0.1;//速度
+      this.speed = options.speed != undefined ? options.speed : 1.0;//速度
       this.lineBackAlpha = options.lineBackAlpha || 0.05;
+      this.rotate = options.rotate;
     }
 
     get isConstant() {
@@ -41,6 +43,12 @@ function PolylineFlowMult() {
         10,
         result.speed
       );
+      result.rotate = Cesium.Property.getValueOrDefault(
+        this._rotate,
+        time,
+        true,
+        result.rotate
+      );
       result.lineBackAlpha = this.lineBackAlpha;
       result.frameNumber = Cesium.getTimestamp();
       return result;
@@ -52,6 +60,7 @@ function PolylineFlowMult() {
         (other instanceof PolylineFlowMultMaterialProperty &&
           Cesium.Property.equals(this._color, other._color) &&
           Cesium.Property.equals(this._speed, other.speed) &&
+          Cesium.Property.equals(this._rotate, other.rotate) &&
           Cesium.Property.equals(this.lineBackAlpha, other.lineBackAlpha))
       );
     }
@@ -60,6 +69,7 @@ function PolylineFlowMult() {
   Object.defineProperties(PolylineFlowMultMaterialProperty.prototype, {
     color: Cesium.createPropertyDescriptor("color"),
     speed: Cesium.createPropertyDescriptor("speed"),
+    rotate: Cesium.createPropertyDescriptor("rotate"),
     transparency: Cesium.createPropertyDescriptor("lineBackAlpha"),
   });
 
@@ -80,27 +90,47 @@ function PolylineFlowMult() {
             float baseTime = fract(czm_frameNumber * speed / 60.0) * 1.1;
 
             // 高频时间轴（控制高光点）
-            float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0);
+            // float highlightTime = fract(czm_frameNumber * speed * 3.0 / 60.0);
+            float highlightTime = fract(abs(speed) * czm_frameNumber * 0.01);
             float highlightSpacing = 0.3; // 高光点间隔
 
             // 主光带透明度计算
             float mainAlpha = smoothstep(baseTime-0.1, baseTime, st.s) * step(-baseTime, -st.s);
 
             // 多高光点计算（3个周期性光斑）
-            float highlight1 = smoothstep(highlightTime-0.05, highlightTime, st.s) *
+            float highlight11 = smoothstep(highlightTime-0.05, highlightTime, st.s) *
                               step(-highlightTime, -st.s) *
                               (1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - highlightTime)));
 
-            float highlight2 = smoothstep(highlightTime+highlightSpacing-0.05,
+            float highlight21 = smoothstep(highlightTime+highlightSpacing-0.05,
                                         highlightTime+highlightSpacing, st.s) *
                               step(-(highlightTime+highlightSpacing), -st.s) *
                               (1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+highlightSpacing))));
 
-            float highlight3 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
+            float highlight31 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
                                         highlightTime+2.0*highlightSpacing, st.s) *
                               step(-(highlightTime+2.0*highlightSpacing), -st.s) *
                               (1.0 - smoothstep(0.0, highlightSpacing, abs(st.s - (highlightTime+2.0*highlightSpacing))));
 
+
+            float highlight12 = smoothstep(highlightTime-0.05, highlightTime, 1.0 - st.s) *
+                              step(-highlightTime, -(1.0-st.s)) *
+                              (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - highlightTime)));
+
+            float highlight22 = smoothstep(highlightTime+highlightSpacing-0.05,
+                               highlightTime+highlightSpacing, 1.0 - st.s) *
+                              step(-(highlightTime+highlightSpacing),-(1.0 - st.s)) *
+                              (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0-st.s - (highlightTime+highlightSpacing))));
+
+            float highlight32 = smoothstep(highlightTime+2.0*highlightSpacing-0.05,
+                              highlightTime+2.0*highlightSpacing, 1.0 - st.s) *
+                              step(-(highlightTime+2.0*highlightSpacing), -(1.0-st.s)) *
+                              (1.0 - smoothstep(0.0, highlightSpacing, abs(1.0 - st.s - (highlightTime+2.0*highlightSpacing))));
+
+
+            float highlight1 = !rotate?highlight11:highlight12;
+            float highlight2 = !rotate?highlight21:highlight22;
+            float highlight3 = !rotate?highlight31:highlight32;
             // 合并效果
             // material.alpha = mainAlpha * 0.7 +
             //                 (highlight1 + highlight2 + highlight3) * 0.5 +
@@ -120,6 +150,7 @@ function PolylineFlowMult() {
         uniforms: {
           color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
           speed: 0.1,
+          rotate: true,
           lineBackAlpha: 0.05,
         },
         source: Cesium.Material.PolylineFlowMaterialSource,

src/Tools/index.js

@@ -10,6 +10,7 @@ import { Proj } from './proj'
 import { open as projConvertOpen, close as projConvertClose } from './projConvert'
 import { open as projectionConvertOpen, close as projectionConvertClose } from './projectionConvert'
 import { setActiveViewer, closeRotateAround, closeViewFollow } from '../Global/global'
+import FlowPictureMaterialProperty from '../Obj/Materail/FlowPictureMaterialProperty'
 
 class Tools {
   /**
@@ -513,8 +514,11 @@ class Tools {
     return res
   }
 
-  getMaterial(color = '#2ab0c2', type = 0) {
+  getMaterial(color = '#2ab0c2', type = 0, entity = null, newParam = {}) {
     let material = ''
+
+
+
     switch (Number(type)) {
 
       case 1: //虚线
@@ -531,60 +535,51 @@ class Tools {
         break
       case 3: //尾迹光线
         material = new Cesium.PolylineFlowMaterialProperty({
-          color: color
+          color: color,
+          speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+          rotate: newParam.rotate
         })
         break
       case 4: //多尾迹光线
         material = new Cesium.PolylineFlowMultMaterialProperty({
-          color: color
+          color: color,
+          speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+          rotate: newParam.rotate
         })
         break
       case 5: //普通流动虚线
         material = new Cesium.FlowDashedLineFlowMaterialProperty({
           color: color,
-          uType: 0
+          uType: 0,
+          speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+          // dashSize: newParam.dashSize,
+          space: newParam.space
         })
         break
       case 6: //流动虚线2
         material = new Cesium.FlowDashedLineFlowMaterialProperty({
           color: color,
-          uType: 1
+          uType: 1,
+          speed: newParam.rotate ? newParam.speed : 0 - newParam.speed,
+          // dashSize: newParam.dashSize,
+          space: newParam.space
         })
         break
       case 7: //流动箭头1
-        material = new Cesium.LineTextureMaterialProperty({
+      case 8: //流动箭头2
+      case 9: //流动箭头3
+      case 10: //流动箭头4
+      case 11: //流动箭头5
+      case 12: //流动箭头6
+        let param = {
           color: color,
-          image: this.getSourceRootPath() + '/img/arrow/2.png',
+          image: this.getSourceRootPath() + `/img/arrow/${type - 6}.png`,
-          // imageW: 172
+          space: newParam.space,
-        })
+          speed: newParam.speed
-        // let that = this
+        }
-        // var curCanvas = 'a';
+        param.speed = newParam.rotate ? param.speed : 0 - param.speed
-        // let i = 0;
+        this.getFlowTexture(this, param, entity)
-        // function drawCanvasImage(time, result) {
+
-        //   let canvas = document.createElement('canvas');
-        //   canvas.id = "canvas-" + curCanvas;
-        //   // document.getElementById('app').appendChild(canvas)
-        //   // var canvas = document.getElementById("canvas-" + curCanvas);
-        //   let cwidth = 494;
-        //   let cheight = 172;
-        //   var ctx = canvas.getContext("2d");
-        //   var img = new Image();
-        //   img.src = that.getSourceRootPath() + '/img/arrow/1.png';
-        //   ctx.clearRect(0, 0, cwidth, cheight);
-        //   img.onload = function () {
-        //     if (i <= cwidth) {
-        //       ctx.drawImage(img, i, 0);
-        //     } else
-        //       i = 0;
-        //     i += 3;
-        //   }
-        //   curCanvas = curCanvas === 'a' ? 'b' : 'a';
-        //   return canvas;
-        // }
-        // material = new Cesium.ImageMaterialProperty({
-        //   image: new Cesium.CallbackProperty(drawCanvasImage, false),
-        //   transparent: true
-        // })
         break
       default:
         material = Cesium.Color.fromCssColorString(color)
@@ -592,6 +587,79 @@ class Tools {
     }
     return material
   }
+  getFlowTexture(that, options, entity) {
+
+    const canvasEle = document.createElement('canvas');
+    const ctx = canvasEle.getContext('2d')
+    const myImg = new Image()
+    // myImg.src = that.getSourceRootPath() + '/img/arrow/1.png'
+    myImg.src = options.image
+    myImg.onload = function () {
+      if (options.speed > 0 || options.speed == 0) {
+        canvasEle.width = myImg.width * (options.space + 1)
+        canvasEle.height = myImg.height
+        ctx.drawImage(myImg, myImg.width * (options.space / 2), 0)
+      } else {
+        ctx.clearRect(0, 0, canvasEle.width, canvasEle.height);
+        ctx.save(); // 保存当前状态
+        canvasEle.width = myImg.width * (options.space + 1)
+        canvasEle.height = myImg.height
+        ctx.translate(canvasEle.width / 2, canvasEle.height / 2); // 移动原点至中心
+        ctx.rotate(Math.PI); // （弧度制）
+        ctx.drawImage(myImg, -myImg.width * (options.space / 2), -myImg.height / 2)
+        ctx.restore(); // 恢复状态
+      }
+
+      // let repeat = getRepeat()
+      // }, false)
+      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);
+
+            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 / ((myImg.width / myImg.height * 5) + 1);
+            repeatX *= groundResolution / cameraHeight / (options.space * (canvasEle.width / canvasEle.height * 5) + 1);
+            // if (repeatX < 3) {
+            //   repeatX = 3
+            // }
+            // return new Cesium.Cartesian2(repeatX, 1.0);
+            return repeatX;
+          })
+        }
+      )
+    }
+  }
 
   /*创建直箭头图片*/
   create_arrow1_picture(color) {

static/custom/css/index.css

@@ -2594,7 +2594,9 @@
 .YJ-custom-base-dialog.polyline>.content {
   width: 580px;
 }
-
+.YJ-custom-base-dialog.polyline>.content>div #dashTextureDom {
+  display: none;
+}
 .YJ-custom-base-dialog.polyline>.content>div .row .col {
   margin: 0 10px;
 }
@@ -2643,6 +2645,8 @@
   max-height: 185px;
 }
 
+
+
 /* 贴地图片 */
 .YJ-custom-base-dialog.ground-image>.content {
   width: 500px;