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 實現風場圖效果(附源碼下載)

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