How to add wind field effect to map with Vue+OpenLayer

The knowledge of this article "how to use Vue+OpenLayer to add wind field effect to a map" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use Vue+OpenLayer to add wind field effect to a map" article.

First we need to install a plug-in.

Plug-in address

Npm install ol-windy-save

Then we need a piece of data to draw the wind field, and I upload the file at the end of the file.

The next step is simple, which is the following code.

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 the 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 airflow particles addWindyLayer () {const windLayer = new WindLayer (gfs, {foceRender: false, windOptions: {globalAlpha: 0.9, / / Particle transparency maxAge: 10, / / maximum number of surviving frames velocityScale: 1Comp100 / / Particle velocity frameRate: 20, / / paths: 5000, / / number of particles colorScale: () = > {return "# 00b3ef"}, width: 3,}}) map.addLayer (windLayer)},},} .home {width: 100%; height: 100%; background-color: aliceblue; position: relative;} # map {height: 100%; width: 100%;}

The gfs file is the wind field data.

Download gfs file [click here]

Then let's see the effect.

The above is about the content of this article on "how to use Vue+OpenLayer to add wind field effect to a map". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.