openlayers+vue绘制水流——流动的虚线

openlayers+vue绘制流动虚线的原理

openlayers绘制流动的虚线和canvas绘制流动虚线原理类似，利用linedash属性绘制一组线段和间距交替的虚线，然后利用偏移量，利用定时器循环，最后就可以实现水流效果；
话不多说直接上代码

<template>
  <div id="box">
    <div id="map"></div>
  </div>
</template>
<script>
import Map from "ol/Map";
import View from "ol/View";
import { Stroke, Style } from "ol/style";
import { LineString } from "ol/geom";
import { OSM, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import Feature from 'ol/Feature';
import GeoJSON from "ol/format/GeoJSON";
export default {
  mounted() {
    var map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [125.346473,43.89179],
        zoom: 1,
        projection:'EPSG:4326'
      })
    });
     var style=new Style({
           stroke:new Stroke({
               color:'#EAE911',
               width:20
           })
       });
    var newSource=new VectorSource({//第一个直线数据，外部获取的geojson文件，文件的数据就是.geojson路径的数据
      url:'./static/管道路径.geojson',
      format: new GeoJSON()
    })
    var newVector=new VectorLayer({
      source:newSource
    })
    //第二个直线数据，手动添加的位置数据
    var line=new LineString([[125.346473,43.89179],[116.617835,39.981154],[124.368689,40.115714]])
    var source=new VectorSource({
        wrapX:false
    })
    var outlineStroke=new Style({
        stroke:new Stroke({
            color:[25,25,255,1],
            width:5
        })
    })
    function getAnimationStrokeStyle(){
        return new Style({
            stroke:new Stroke({
                color:[204,204,255,1],
                widht:5,
                lineDash:[2,7],//一组线段和间距交互的数组，可以控制虚线的长度
                lineDashOffset:feature.get('dashOffset')//偏移量，控制虚线的速度和方向
            })
        })
    }
    //手动添加数据的矢量数据
    var feature = new Feature({
      geometry: line,
      finished: false,
      dashOffset:-8
    });
    function getStyle(){
        return[outlineStroke,getAnimationStrokeStyle()]
    }
    var array=[]
    feature.setStyle(getStyle())
    source.addFeature(feature)
    var flightsLayer=new VectorLayer({
            source:source,
            style:style
        });
    map.addLayer(flightsLayer)
    map.addLayer(newVector)
    setInterval(() => {
        let offset1=feature.get('dashOffset')
        offset1=(offset1==0?-8:offset1+1)
     
        feature.set('dashOffset',offset1) 
        feature.setStyle(getStyle())
    }, 100);
      newVector.getSource().on('addfeature',function(event){
      array.push(event.feature)
      for(let i=0;i<array.length;i++){
        array[i].setStyle(getStyle())
        array[i].set('dashOffset',0)
         setInterval(() => {
        let offset=array[i].get('dashOffset')
        offset=(offset==8?0:offset+1)
        
        array[i].set('dashOffset',offset)
        array[i].setStyle(getStyle())
    }, 100);
      }
    })
  }
};
</script>
<style scoped>
#box{
  width: 100%;
  margin: 0 auto;
  height: calc(100% - 40px);
  
}
#map{
  width: 99%;
  height: calc(100% - 40px);
 position: absolute ;}
</style>

效果如图所示：

openlayers绘制虚线总结

上面的代码是绘制两段流动的虚线，一段是从.geojson文件获取的数据路径，数据的内容就是geojson文件绘制路径的数据，另一段是自己手动添加的路径，