cesium 實現風場圖效果(附源碼下載)

前言

cesium 官網的api文檔介紹地址cesium官網api，里面詳細的介紹 cesium 各個類的介紹，還有就是在線例子：cesium 官網在線例子，這個也是學習 cesium 的好素材。

內容概覽

1.基於cesium 實現風場圖效果
2.源代碼 demo 下載

本篇實現 cesium 風場圖功能，效果圖如下：

實現思路：

• 場數據源獲取：
  天氣數據由全球預報系統（GFS）生成， 由美國國家氣象局管理。 預測每天產生四次，並可用於 從NOMADS下載。 這些文件位於GRIB2 格式並包含超過300條記錄。 我們只需要這些記錄中的一小部分就可以在特定的等壓線上可視化風資料。 下面的命令下載 1000 hPa風向量，並使用grib2json將它們轉換為JSON格式。
• 屏幕上生成一系列隨機粒子位置並繪制粒子
• 對於每一個粒子，查詢風數據以獲得其當前位置的粒子速度，並相應地移動它
• 將一小部分粒子重置為一個隨機的位置。這就確保了風從不會變成空的區域
• 淡出當前屏幕，並在頂部繪制新定位的粒子

核心代碼

• 風場圖初始化調用

function Draw() {
$.ajax({
type: "get",
url: "sampledata/wind/gfs20171227.json",//請求風場數據源json
dataType: "json",
success: function (response) {
var header = response[0].header;
windy = new Windy(response, viewer);
redraw();
},
error: function (errorMsg) {
alert("請求數據失敗1!");
}
});
}
 
var timer = null;
//加載風場圖
Draw();
function redraw() {
timer = setInterval(function () {
windy.animate();
}, 300);
}

• Windy風場

var _primitives = null;
var SPEED_RATE = 0.15;
var PARTICLES_NUMBER =2000;//默認2000
var MAX_AGE = 10;
var BRIGHTEN = 1.5;
 
var Windy = function (json, cesiumViewer) {
this.windData = json;
this.windField = null;
this.particles = [];
this.lines = null;
_primitives = cesiumViewer.scene.primitives;
this._init();
};
Windy.prototype = {
constructor: Windy,
_init: function () {
// 創建風場網格
this.windField = this.createField();
// 創建風場粒子
for (var i = 0; i < PARTICLES_NUMBER; i++) {
this.particles.push(this.randomParticle(new Particle()));
}
},
……

更多詳情見下面鏈接文章：

GIS之家小專欄此文章：cesium 實現風場圖效果(附源碼下載)

文章提供源碼，對本專欄感興趣的話，可以關注一波