cesium绘制网格_cesium 实现风场图效果
发布时间
阅读量：
阅读量
前言
本篇实现 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()));
}
},
createField: function () {
var data = this._parseWindJson();
return new WindField(data);
},
animate: function () {
var self = this,
field = self.windField,
particles = self.particles;
var instances = [],
nextX = null,
nextY = null,
xy = null,
uv = null;
particles.forEach(function (particle) {
if (particle.age <= 0) {
self.randomParticle(particle);
}
if (particle.age > 0) {
var x = particle.x,
y = particle.y;
if (!field.isInBound(x, y)) {
particle.age = 0;
} else {
uv = field.getIn(x, y);
nextX = x + SPEED_RATE * uv[0];
nextY = y + SPEED_RATE * uv[1];
particle.path.push(nextX, nextY);
particle.x = nextX;
particle.y = nextY;全部评论 (0)
还没有任何评论哟~