拿到一張UV風速圖
其實資料是來源於NOAA 的Grid 格點風力資料，解析度是1度，全球共360*180 個格點 （總計64,800個）. 那麼就我之前的瞭解，風力資料一般都是分為U/V 兩個方向，包括NetCDF 資料也是，座標資訊是隱含在grid 的索引中，風力記錄在了 U/ V 兩個垂直的方向.
把水平U 方向的風力和 垂直V 方向的風力數值分別作為 RGB波段的 R，G 兩個數值，合成一張png就如圖所示。
由於我沒有采用官網的資料下載API，所以沒有拿到原始的json 資料，只拿到一張png，所以無法反演出 U/V 數值的符號，只有正值. 所以最後渲染出來只有第一象限的風向，當然作為演示應該沒問題。
根據UV 圖提取出每個格點的
tmpCanvas.width = windImage.width;
tmpCanvas.height = windImage.height;
tmpCtx.drawImage(windImage, 0, 0);
// imageData.data.length: width*height*4
let imageData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height),
dataLength = imageData.data.byteLength;
if (compressRatio == undefined || (compressRatio !== undefined && compressRatio < 1)) {
console.warn("Input compressRatio invalid, use default 1.");
compressRatio = 1;
}
for (let i=1;i<tmpCanvas.height-1;i+=compressRatio) {
// i:0~180, j:0~360
for (let j=0;j<tmpCanvas.width;j+=compressRatio) {
let particle = {
'lon': -180 + j,
'lat': -90 + i,
};
let uIndex = (i * 360 + j) * 4, vIndex = uIndex + 1;
let uVal = imageData.data[uIndex], vVal = imageData.data[vIndex],
// 根據UV計算風力，和風向.
windPow = Math.pow(uVal, 2) + Math.pow(vVal, 2),
angle = Number(Math.atan(vVal/uVal).toFixed(2)),
color = 'rgba('+ (windPow/255).toFixed(0) + ', 255, 100, 0.7)';
// return geojson dataSource for mapboxgl.vector layer.
if (geojson) {
particle = { "type": "Feature",
"properties": {
"angle": angle,
"color": color
},
"geometry": {
"type": "Point",
"coordinates": [-180 + j, -90 + i]
}
}
features.push(particle);
} else {
// 如果不用geojson 的資料，就用自定義的canvas 去渲染，為了動畫方便，我們採用這種方式.
particle.color = color;
particle.angle = angle;
particle.radius = radius;
particles.push(particle);
}
}
}
複製程式碼Canvas 渲染風向
當解析出這麼多點之後，就可以開始寫渲染的函式了，可以用mapbox 原生的 fill layer 來做渲染（基於webgl，效率更高）。但是為了方便動畫，這裡就採用自己之前寫的動畫控制器Alex.myTween 和 CanvasOverLayer 擴充套件來渲染
// genWindTarget 函式其實就是根據風向來模擬一個風粒子的動畫效果，產生動畫的目標物件，Alex.myTween為根據source 和target 自動計算中間座標和狀態.
objs = windlayer.particles; targets = genWindTarget(objs);
// calc targets depend on its angle, use 6 degree as dist.
Alex.myTween.get(objs).to(targets, 8000, windlayer.redraw);
map.on('moveend', function(){
windlayer.redraw(objs);
});
複製程式碼渲染的效果如下圖：
其實就是做起來好玩，這個專案起源於對動畫的實驗，API全部採用ES6 + webpack，為了自己寫起來方便，採用的給mapbox 疊加自定義CanvasOverlayer的形式 來快速開發自己想要的效果。之後還是打算切換到 webgl，畢竟那個效率才高。 專案中還有些 其他外掛，歡迎大家把玩，提issue
昨天剛更新的將 Chart.js 整合到地圖的dom 疊加層，直接配置外掛中的domOverlay 即可，簡單好用。