海洋氣象數據可視化，以流場的方式顯示風場圖，海洋氣象API使用

​

一、 天氣展示方式

長期以來，氣象數據可視化對餅狀圖、柱狀圖、表格圖等傳統圖形圖表的使用率是最高的。不可否認，此類圖形圖表是數據可視化的鼻祖，在很多時候也是最清晰有效的。但是，在可視化技術飛速發展的當下，傳統圖形圖表一方面已經跟不上用戶多樣化的信息獲取腳步；另一方面，相對單一的可視化表達方式也無法滿足氣象數據分析過程中越來越深入化、專業化的解讀需要。

本文及后續文章將集中研究天氣圖的可視化引擎，實現氣象數據的多樣可視化表達與分析。實現散點圖、色斑圖、等值線面、流場圖、流線圖等多種可視化效果。查看相關示例：海洋氣象，潮汐。

​

二、wind-layer插件介紹

wind-layer 設計之初是來源於 earth (opens new window)cambecc (opens new window)的一個氣象數據的展示，他使用了流體場的方式去展示了全球的風速和風向富有很強的 表現力, 這個插件的很多核心代碼也是來源於此。

wind-layer可以和openlayers，leaflet等主流的地圖插件配合使用，本文主要介紹如何在openlayers中加載風場圖，其主要的API說明如下：

圖層參數

參數	說明	類型	默認值
windOptions	風場參數，具體配置如下	object	--
map	地圖對象，必須配置，不需要調用 addLayer，具體可以參考 openlayer 官方文檔	ol.Map	--
zIndex	圖層層級	number	--

其他參數遵循 ol 基礎圖層參數。

#windOptions

參數	說明	類型	默認值
globalAlpha	全局透明度，主要影響粒子路徑拖尾效果	number	0.9
lineWidth	粒子路徑寬度	number\|function	1, 當為回調函數時，參數function(m:對應點風速值) => number
colorScale	粒子顏色配置	string\|function\|string[]	#fff，當為回調函數時，參數function(m:對應點風速值) => string
velocityScale	對於粒子路徑步長的乘積基數	number	1 / 25
maxAge \| particleAge(不推薦使用)	粒子路徑能夠生成的最大幀數	number	90
paths	生成的粒子路徑數量	number\|function	800, 當為回調函數時，參數function(m:對應點風速值) => number
particleMultiplier	粒子路徑數量的系數，不推薦使用（視野寬度 * 高度 * 系數）	number	1 / 300
frameRate	幀率（ms）	number

三、使用實例

function getwind(load) {
  if(load!=false){
	show("load");// 顯示加載圖標，一般是加載gif圖片
	}
	$.ajax({
		type : "post",
		dataType : "json",
		xhrFields : {
			withCredentials : false
		},
		url : "Getwind",
		async : true,
		success : function(result) {
			closeid("load");//關閉加載動畫
			if (result.msg == "ok") {                               // 判斷是否已經加載了windlayer圖層，如果已經加載，直接更新數據即可
				if(windlayer!=undefined){
					windlayer.setData(result.content);
					windlayer.setMap(map);
					windlayer.start();
					return;
				}                              // 初始化風場插件
				 windlayer = new OlWind.WindLayer(result.content, {
					windOptions : {
						// colorScale: scale,
						velocityScale : 1 / 100, //粒子路徑長度  
						paths : 3000, // 粒子數量
						frameRate : 100,// 刷新率，單位是毫秒
						// 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,// openlayers的map容器
				// projection: 'EPSG:4326'
				});
				 
				 
			}
		},
		error : function() {
			closeid("load");
		}
	})

}

風場數據是風的u、v模式數據，數據格式會在后續文章中發布，查看演示：電子海圖，潮汐查詢

​