iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 21
0
Modern Web

30天打造我的WebGIS系列 第 21

[Day 21] 在WebGIS加入風場圖

前言

前幾天研究了內插、TIN、 Voronoi Diagram、Contours(等高線)、Heatmaps(熱區圖)與Clustering(群聚圖),這些都是很常見的webGIS資料視覺化應用,今天要來研究的是前陣子很常看到的全球風場圖,看一下到底做了些什麼...

風場圖在不同的地圖、視覺化工具皆有不同的實作:

原始資料與資料來源

全球風場圖的資料來源主要是美國國家海洋暨大氣總署(NOAA)天氣資料,採用的格式為氣象交換格式GRIB2,這個格式是Binary的,在上述三個風場圖實作的套件中,都是採用grib2json轉成一包json物件,而這個東西到底記錄了什麼呢?他其實就是網格資料。

打開grib2json匯出的json檔案,他大概長這樣:

檔案內除了資料外,還記錄了metadata於header,
在data的部分,記錄方式是一條一條橫方向記錄,
例如第一點是(25.6,120.5),第二點就是(25.6,120.6)的值,第三點(25.6,120.7)...以此類推...

header有定義格子的起點與長寬資訊,以一般拿到的NOAA大氣資料(空間解析度為一度)展示出來大概會是這麼密:

怎麼畫圖

前面範例的風場圖是空間解析度為一度的NOAA大氣資料(解析度header會定義),也就是每一個網格點的氣壓,為產生風向圖的效果,做了幾個處理。

1.在格子與格子間以雙線性內插產生面。(wiki)

2.內插完成面後,隨機在面之中產生若干粒子,讓粒子沿著速度場、梯度方向移動(由高至低)。
3.可以設定一些參數,包含粒子的生命週期,最大最小速度、顏色等等
ps.詳情可參考earth的描述及程式碼^^

Leaflet實作

接下來,我們使用leaflet-velocity來繪製全球風場圖,加入我們的地圖專案。

引入leaflet-velocity.js,並預先下載大氣的網格資料。
(使用這個專案必須跟grib2json的輸出格式一樣)

根據套件說明直接使用:

$.getJSON("./dist/assets/data/wind-global.json", function (data) {
  var velocityLayer = L.velocityLayer({
  //設置一些顯示的參數
    displayValues: false,
    data: data,
    maxVelocity: 10,
    colorScale: ['#bd0026', '#f03b20', '#fd8d3c', '#fecc5c', '#ffffb2']//色階
  });
  map.addLayer(velocityLayer);

});

這個圖層是以Canvas方式實作,以增加效能(不然一堆粒子應該會爆炸...)

成果:

後記

除了NOAA的大氣資料,如果要產生類似效果的向量圖或梯度圖,也可以自行產製類似的資料繪製在地圖上(洋流等等)。
今天的程式碼一樣放在github(day21的commit)。


上一篇
[Day 20] WebGIS中的Contours、Heatmaps與Clustering資料呈現
下一篇
[Day 22] WebGIS中加入Google Directions導航API
系列文
30天打造我的WebGIS30

尚未有邦友留言

立即登入留言