openlayers+vue水流图

#vue 水流图

dows() {
      var line = new LineString([
        [118.507906, 31.689362],
        [118.707906, 31.689362]
      ]);
    
      //第二个直线数据，手动添加的位置数据
    
      var source = new VectorSource({
        wrapX: false
      });
      var outlineStroke = new Style({
        stroke: new Stroke({
          color: [25, 25, 255, 1],
          width: 10
        })
      });
      function getAnimationStrokeStyle() {
        return new Style({
          
          //  geometry: new Point([118.507906, 31.689362]),
          //   image: new Icon({
          //     src: 
          //     "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
          //     opacity: 1,
          //     anchor: [0.5, 0.5],
          //     rotateWithView: true,
          //     rotation: feature.get("dashOffset"),
          //     scale: 0.1
          //   })
          stroke: new Stroke({
            color: [255, 255, 255, 1],
            width:3,
            lineDash: [20,27], //一组线段和间距交互的数组，可以控制虚线的长度
            lineDashOffset: feature.get("dashOffset") //偏移量，控制虚线的速度和方向
          })
        });
      }
      //手动添加数据的矢量数据
      var feature = new Feature({
        geometry: line,
        finished: false,
        dashOffset: -8
      });
      function getStyle() {
        return [outlineStroke, getAnimationStrokeStyle()];
      }
      feature.setStyle(getStyle());
      source.addFeature(feature);
      var flightsLayer = new VectorLayer({
        source: source,
         zIndex:10
      });
      this.icingMap.addLayer(flightsLayer);
      setInterval(() => {
        let offset1 = feature.get("dashOffset");
        offset1 =  offset1 + 1;
        feature.set("dashOffset", offset1);
        feature.setStyle(getStyle());
      }, 10);
    },