簡介

海洋環境資訊服務是向海上或岸上的使用者提供其所需要的海洋動力環境、海洋氣象環境和有關的地球物理情報資訊，以保障海上運輸和生產安全，促進海洋經濟發展。海洋氣象資料服務的原則是滿足使用者對海洋環境條件和氣象情報的要求，在保障海洋作業安全的條件下，提高海洋作業效率和減少費用開支。

視覺化

要想實現天氣圖層的視覺化，以溫度圖層為例，我們首先想到的是熱力圖的方式實現，但是有個問題就是我們通常的溫度圖層原始資料都是格點資料，通常有幾十萬甚至上百萬個點，如果直接以熱力圖的方式實現，顯得簡單粗暴，並且幾十萬個點同時渲染，會造成卡頓。所以我們必須選擇其他方式實現。還有一種實現方式是對溫度進行插值分析，計算出溫度相同的區域，然後以不同的顏色繪製不同的溫度區域。那麼我們在前端繪製的時候只需要繪製多邊型區域即可。

繪製溫度圖層

以下是以openlayers為例繪製溫度圖層

請求URL：https://data.sailxy.com/Gettmp?[請求引數]

請求引數：

uid

使用者id，獲取uid請聯絡作者。例如uid=hy2021726

timestamp

當前時間戳，例如 timestamp=1627283926，注意必須是當前時間，時間戳五分鐘內有效

key

使用者祕鑰，使用uid對應的祕鑰ukey+timestamp取md5值，例如uid=hy2021726對應的祕鑰為abcdef，key引數值就是對adcdef1627283926取MD5

返回資料

{"msg":"ok",data[{"hvalue":10,lvalue:5,point[[lat,lon],[lat,lon]]},....]}
 

繪製方法

// 獲取資料function gettmp() {
	$.ajax({
		type : "post",
		dataType : "json",
		xhrFields : {
			withCredentials : false
		},
		url : url,//替換為請求地址
		async : true,
		success : function(result) {
			if (result.msg == "ok") {
				data = result.content
				tmpjson=[];
				for (i = 0; i < data.length; i++) {
					datai = data[i].data;
					length = datai.length;
					coord = [];
					coords=[];
					for (j = 0; j < length; j++) {
						coordinaete = ol.proj.transform([ datai[j][0],
								datai[j][1] ], 'EPSG:4326', 'EPSG:3857');
						
						coord.push(coordinaete)
					}
					coords.push(coord)
						
					geometry = new ol.geom.Polygon(coords)
					json = new ol.Feature({
						geometry : geometry,
						"lvalue":data[i].lvalue
					});	
					tmpjson.push(json);  
				}

				showtmp(tmpjson,-80,80);
			}

			

		},
		error : function() {
		}
	})

}function showtmp(geojsonObject,min,max) {
	map.removeLayer(tmplayer);
	tmplayer= new ol.layer.Vector({ // 初始化向量圖層
		source : new ol.source.Vector({
			features : geojsonObject
		}),
		style : function(feature, resolution) {
			stroke = new ol.style.Stroke({
				color : '#00000000',
				width : 0,
			})
			var colorv=feature.get("lvalue");
			color=getcolor(colorv,min,max);
	
			fill = new ol.style.Fill({
				color : color
			})

			style = new ol.style.Style({
				fill : fill,
				stroke : stroke,
				

			})
			return [ style ]
		},

	});


	map.addLayer(tmplayer);

}
 

檢視示例：海洋氣象,潮汐