1, Weather display mode

For a long time, meteorological data visualization has the highest utilization rate of traditional graphics and charts such as pie chart, column chart and table chart. It is undeniable that this kind of graph is the ancestor of data visualization and is also the most clear and effective in many cases. However, with the rapid development of visualization technology, on the one hand, the traditional graphics and charts can not keep up with the diversified information acquisition of users; On the other hand, a relatively single visual expression can not meet the needs of more and more in-depth and professional interpretation in the process of meteorological data analysis.

This paper and subsequent articles will focus on the visualization engine of weather map to realize the diversified visual expression and analysis of meteorological data. Realize various visualization effects such as scatter diagram, color spot diagram, isoline surface, flow field diagram, streamline diagram and so on. See related examples: Marine meteorology, tide.

2, Introduction to wind layer plug-in

At the beginning of the design of wind layer, it is a display of meteorological data from Earth (open new window) cambecc (open new window). It uses the way of fluid field to show the global wind speed and direction, which is very expressive. Many core codes of this plug-in also come from this.

Wind layer can be used together with mainstream map plug-ins such as openlayers and leaflet. This paper mainly introduces how to load wind farm map in openlayers. The main API descriptions are as follows:

Layer parameters

parameter	explain	type	Default value
windOptions	The specific configuration of wind farm parameters is as follows:	object	--
map	Map objects must be configured and do not need to call openlayer. For details, please refer to the openlayer official document	ol.Map	--
zIndex	Layer level	number	--

Other parameters f ol low the {base layer parameters.

#windOptions

parameter	explain	type	Default value
globalAlpha	Global transparency, which mainly affects the trailing effect of particle path	number	0.9
lineWidth	Particle path width	number\|function	1. When it is a callback function, the parameter function(m: corresponding point wind speed) = > number
colorScale	Particle color configuration	string\|function\|string[]	#fff, when it is a callback function, parameter function(m: corresponding point wind speed) = > string
velocityScale	For the product cardinality of particle path steps	number	1 / 25
Maxage \ | particleage (not recommended)	The maximum number of frames a particle path can generate	number	90
paths	Number of particle paths generated	number\|function	800. When it is a callback function, the parameter function(m: corresponding point wind speed) = > number
particleMultiplier	Coefficient of the number of particle paths, not recommended (field width * height * coefficient)	number	1 / 300
frameRate	Frame rate (ms)	number

3, Use example

function getwind(load) {
  if(load!=false){
	show("load");// Display the loading icon, usually loading gif pictures
	}
	$.ajax({
		type : "post",
		dataType : "json",
		xhrFields : {
			withCredentials : false
		},
		url : "Getwind",
		async : true,
		success : function(result) {
			closeid("load");//Turn off loading animation
			if (result.msg == "ok") {                               // Judge whether the windlayer layer has been loaded. If it has been loaded, update the data directly
				if(windlayer!=undefined){
					windlayer.setData(result.content);
					windlayer.setMap(map);
					windlayer.start();
					return;
				}                              // Initialize the park plug-in
				 windlayer = new OlWind.WindLayer(result.content, {
					windOptions : {
						// colorScale: scale,
						velocityScale : 1 / 100, //Particle path length  
						paths : 3000, // Number of particles
						frameRate : 100,// Refresh rate in milliseconds
						// eslint-disable-next-line no-unused-vars
						colorScale : [ "rgb(36,104, 180)", "rgb(60,157, 194)",
								"rgb(128,205,193 )", "rgb(151,218,168 )",
								"rgb(198,231,181)", "rgb(238,247,217)",
								"rgb(255,238,159)", "rgb(252,217,125)",
								"rgb(255,182,100)", "rgb(252,150,75)",
								"rgb(250,112,52)", "rgb(245,64,32)",
								"rgb(237,45,28)", "rgb(220,24,32)",
								"rgb(180,0,35)" ],
						lineWidth : 2,
						// colorScale: scale,
						generateParticleOption : false
					},
					map : map,// map container for openlayers
				// projection: 'EPSG:4326'
				});
				 
				 
			}
		},
		error : function() {
			closeid("load");
		}
	})

}

Wind farm data is the u and v mode data of wind, and the data format will be published in subsequent articles