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 =https://www.cnblogs.com/alannever/p/ 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 實作風場圖效果(附原始碼下載)

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/121112.html

標籤：其他

上一篇：Fastjson反序列化漏洞利用分析

下一篇：GrimTheRipper: 1 Vulnhub Walkthrough