Visualization of marine meteorological data to display wind field map in the form of flow field, which is used by marine meteorological API

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

parameterexplaintypeDefault value
windOptionsThe specific configuration of wind farm parameters is as follows:object--
mapMap objects must be configured and do not need to call openlayer. For details, please refer to the openlayer official documentol.Map--
zIndexLayer levelnumber--

Other parameters f ol low the {base layer parameters.


parameterexplaintypeDefault value
globalAlphaGlobal transparency, which mainly affects the trailing effect of particle pathnumber0.9
lineWidthParticle path widthnumber\|function1. When it is a callback function, the parameter function(m: corresponding point wind speed) = > number
colorScaleParticle color configurationstring\|function\|string[]#fff, when it is a callback function, parameter function(m: corresponding point wind speed) = > string
velocityScaleFor the product cardinality of particle path stepsnumber1 / 25
Maxage \ | particleage (not recommended)The maximum number of frames a particle path can generatenumber90
pathsNumber of particle paths generatednumber\|function800. When it is a callback function, the parameter function(m: corresponding point wind speed) = > number
particleMultiplierCoefficient of the number of particle paths, not recommended (field width * height * coefficient)number1 / 300
frameRateFrame rate (ms)number

3, Use example

function getwind(load) {
	show("load");// Display the loading icon, usually loading gif pictures
		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
				}                              // 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() {


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

Added by markbett on Mon, 10 Jan 2022 21:42:48 +0200