vue openlayer Add wind farm effect

A simple little demo, It's in one openlayers Add wind farm effect to the map .

Don't talk much , Go straight to the point .

First, we need to install a plug-in .

Plug-in address ：https://www.npmjs.com/package/ol-wind

npm install ol-windy --save

Then we need a data to plot the wind field , Finally, upload the file .

It's very simple , This is the code below .

<template>
  <div class="home">
    <div id="map" ref="map"></div>
  </div>
</template>

<script>
  import 'ol/ol.css';
  import Draw from 'ol/interaction/Draw';
  import Map from 'ol/Map';
  import Overlay from 'ol/Overlay';
  import View from 'ol/View';
  import {
     Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
  import {
     LineString, Polygon } from 'ol/geom';
  import {
     OSM, Vector as VectorSource } from 'ol/source';
  import {
     Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
  import {
     getArea, getLength } from 'ol/sphere';
  import {
     unByKey } from 'ol/Observable';
  import {
     WindLayer } from 'ol-wind'
  import gfs from './gfs.json'

  var map = null

  export default {
    
    name: "Home",
    data() {
    
      return {
    
      }
    },
    mounted() {
    
      this.initMap()
    },
    methods: {
    
      //  Initialize map 
      initMap() {
    
        map = new Map({
    
          layers: [
            new TileLayer({
    
              source: new OSM(),
            }),
          ],
          target: 'map',
          view: new View({
    
            center: [120, 35],
            zoom: 5,
            maxZoom: 18,
            projection: 'EPSG:4326',
          }),
        });

        this.addWindyLayer()
      },

      //  Add wind particles 
      addWindyLayer() {
    
        const windLayer = new WindLayer(gfs, {
    
          foceRender: false,
          windOptions: {
    
            globalAlpha: 0.9,  //  Particle transparency 
            maxAge: 10,  //  Maximum surviving frames 
            velocityScale: 1/100,  //  Particle velocity 
            frameRate: 20,  //  Every time 50 Draw once 
            paths: 5000,  //  Number of particles 
            colorScale: () => {
    
              return "#00b3ef"
            },
            width: 3,
          }
        })
        map.addLayer(windLayer)
      },
    },
  };

</script>
<style scoped>
  .home {
    
    width: 100%;
    height: 100%;
    background-color: aliceblue;
    position: relative;
  }

  #map {
    
    height: 100%;
    width: 100%;
  }
</style>

among gfs The file is the wind farm data .

gfs File download 【 Click here 】

Then look at the effect ~