leaflet實現風場流動

概述：本文基於《openlayer4中風場的實現》一文，使用leaflet實現流動風場的效果。

廢話不多說，下面貼上**：

1、wind演算法及擴充套件：

1/**

2* @author
3* @date
4* 1.計算矩形4個角的canvas座標x、y，初始化該區域所有網格點，間距可根據map index設定
5* 2.將已有的站點經緯度轉換為canvas座標
6* 3.插值法計算出每個網格點的風向、風速
7* 4.在該網格區域隨機生成width*8個點，重複運動8*/
910var windy = function
(options) ;
34callback(bounds);35}
3637
var createfield = function
(columns, bounds, callback) 
4243         vector.release = function
() 46
47         vector.randomize = function
(o) 
54callback(bounds, vector);
55};
5657
var interpolategrid = function
(bounds, stationpoints, callback) 
67             columns[x + 1] = columns[x] =column;68}
6970
function
interpolate(x, y) ;
76             stationpoints.foreach(function
(s) 
86if (speed1 != 0) 
89});
90return
wind;91}
9293         (function
batchinterpolate() 
102}
103createfield(columns, bounds, callback);
104})();
105};
106107
var animate = function
(bounds, vector) ));
114}
115116
function
evolve() );
122                     particles.splice(i, 1, particle);
123}
124var x =particle.x;
125var y =particle.y;
126var v =vector(x, y);
127if
(v)  else
);138                         particles.splice(i, 1, newparticle);
139}
140                 } else
143                 particle.age += 1;
144});
145}
146147
function
render() );
161ctx.stroke();
162}
163164         (function
frame() , 1000 /frame_rate);
171             } catch
(e) 
174})();
175};
176177
var start = function
(extent, stationpoints) );
184});
185};
186187
var stop = function
() ;
192193
var change = function
(options) 
197198
var windy =;
204205
return
windy;
206};
207208 window.requestanimationframe = (function
() ;
217 })();

1

function
addwindmap());
1617
function
choice(data)else24}
25}2627
var options =;
31windy.change(options);
32winddraw();
3334             map.on('movestart',function
());
38             map.on("moveend",function
());41}
42function
winddraw()
7475
function
invertlatlon (py) );
8889
});90
return
points;
9192}93
function
drawcircle(latlng)).addto(map);
100101
}102
for(var i=0;i)

2、第42行之後的winddraw方法，獲取bounds的經緯度並將其轉化為螢幕座標，在leaflet中是呼叫getbounds來獲取bounds的經緯度，再通過latlngtocontainerpoint方法將其經緯度轉換為螢幕座標；在openlayer中則是通過map.getview().calculateextent();來獲取bounds的經緯度，再通過getpixelfromcoordinate()方法將經緯度轉換為螢幕座標；

展現效果：

（紅色的點為原始資料的所在點）

宣告：本文是基於《openlayer4中風場的實現》一文

原博主****：

q       q:1004740957

e-mail:[email protected]

風場視覺化 風場資料

了解 webgl 基礎之後，接著去看獲取解析風場資料的邏輯，又遇到問題。在文章示例源庫的說明中，首先要安裝 eccodes 嘗試使用 homebrew 但不行。於是就按照 eccodes 源庫的介紹本地進行編譯安裝。在進行第 4 步的時候，碰到了問題 no cmake fortran compile...

氣象風場UV，風向說明

1 0 360表示 用角度表示風向，是把圓周分成360度，北風 n 是0度 即360度 東風 e 是90度，南風 s 是180度，西風 w 是270度，其餘的風向都可以由此計算出來。2 u和v表示 u是東西風上的分量，西風為正。v是南北風上的分量，南風為正。if u 0 v 0 3 風向漢字的計算 ...

CSS實現流動邊框

咳咳，首先講個題外話，原本我是做 c qt 的，然而因為工作 部分原因 學起了前端。當然，這也並不意味著我會丟掉 c qt qml 這些 會接著更新 只是額外增加一些前端相關的文章而已。再者，也想著自己搭個 或是部落格 所以學學前端也是必然的。目前學到了 css動畫 這部分，按照我的習慣，肯定是要實...