Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.