openlayers 画流动的线动态的线

openlayers 画流动的线动态的线

import GeoJSON from 'ol/format/GeoJSON'
import { Vector as VectorLayer } from 'ol/layer'
import { Vector as SourceVec, Cluster, OSM, TileArcGISRest, TileWMS, Vector as VectorSource } from 'ol/source'
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from 'ol/style'
import { Feature } from 'ol'
import { Point } from 'ol/geom'
import View from 'ol/View'
import 'ol/ol.css'


/**
   * 画流动的线
   * @param {*} map
   * @param {*} geojson 文件
   * @param {*} direction 方向  1:从左到右  2:从右到左
   */
  addAnimateLineLayer(map, geojson, direction) {
    //创建矢量源并加载GeoJSON
    const vectorSource = new VectorSource({
      features: new GeoJSON().readFeatures(geojson), // geojson方式
    })
    // const vectorSource = new VectorSource({
    //   url: 'path/to/your/lines.geojson', // url方式
    //   format: new GeoJSON(),
    // })

    // 动画参数
    let offset = 0
    const dashLength = 20

    // 创建矢量图层
    const vectorLayer = new VectorLayer({
      source: vectorSource,
      name: 'animateLineLayer',
      zIndex: 200,
      style: function () {
        return [
          new Style({
            stroke: new Stroke({
              color: '#ff0000',
              width: 5,
            }),
          }),
          new Style({
            stroke: new Stroke({
              color: '#ffffff',
              width: 5,
              lineDash: [20, 27],
              lineDashOffset: 0,
            }),
          }),
        ]
      },
    })

    map.addLayer(vectorLayer)

    // 动画函数
    function animate() {
      let off = direction == 1 ? -offset : offset
      offset = (offset + 1) % dashLength
      vectorLayer.setStyle(function () {
        return [
          new Style({
            stroke: new Stroke({
              color: '#ff0000',
              width: 5,
            }),
          }),
          new Style({
            stroke: new Stroke({
              color: '#ffffff',
              width: 5,
              lineDash: [20, 27],
              lineDashOffset: off,
            }),
          }),
        ]
      })
      requestAnimationFrame(animate)
    }

    // 启动动画
    animate()
  }