风场可视化与原理剖析 |
您所在的位置：网站首页 › cesium三维可视化气象 › 风场可视化与原理剖析 |
风场可视化与原理剖析
|
最近因为项目需要，做风场可视化，也不是什么新鲜的东西了，站在前人的肩膀上鼓捣了两天也算是完成了，特此记录一下。 网上关于风场可视化的文章也挺多，可以拜读以下几位博主文章，在此表示感谢。 数据可视化之风向图（强烈安利这篇博文）可视化之Earth NullSchoolcesium实现风场效果......(教程很多不一一列举了)项目中应用案例是在cesium球上进行可视化，效果图如下（部分显示效果还在优化，下一篇会更新如何在cesium中进行风场可视化效果），cesium集成风场已更新（传送门）
之前看到的cesium中实现的风场效果使用的primitives方式添加的，这种方式能跟地球很好的贴合，地球缩放风场数据不会消失，不过粒子数太多了性能会大大降低，2000左右粒子FPS保持在11左右，所以项目里面没有使用这种方式，而是用canvas绘制，再与地球贴合，显示效果很不错，15000个粒子fps在38左右，本篇主要还是想剖析一下风场的实现方法，所有不在过多讨论cesium上的可视化效果。 风场脱离了地图，就好像一个人没有了灵魂。刚开始研究风场时几乎所有的效果都是跟地图相关的，不同框架下实现跟地图api结合太紧密（不过原理都是以一样的，内部都是坐标转换），不熟悉地图api（arcgisjs、leaflet、cesium等），看起来还是比较吃力的，所以本篇完全从脱离地图角度，来讲讲单纯用canvas如何绘制风场。 先来几张效果图吧： 1、初始界面
2、粒子数目动态增加
3、颜色改变+切换风场范围
这里把风场的主要运行参数进行了动态配置，可以很方便的控制显示效果。 言归正传，要想实现风场效果，风场数据就少不了了，获取方式这里就不过多讨论了，前面列的几篇博客也有一些说明，这里主要说一下比较常用的一些参数：
以上就是比较常见的风场数据了，由header和data组成。 header是风场的一些参数信息，lo1,lo2,la1,la2是风场的范围，nx,ny代表横向纵向划分为多少网格，如上这个风场数据横向有360个格子，纵向有181个格子，dx,dy代表每个格子代表多少经纬度，主要用这8个参数就能够起风了。 data就是风速数据，表示风速大小，风场数据一般含有两个{header:{},data:[]}这样的结构，第一个里面的data是当前格子的横向风速，第二个指的是纵向风速（有可能反过来不过不影响）。 数据有了，如何进行可视化呢？首先需要根据风场数据，生成棋盘格，为什么要生成棋盘？因为有了棋盘格，能非常快速的计算粒子的在当前格子的风速值。棋盘格是一个二维数组，row和cols分别代表header中的ny，nx，每一项是当前格子的横向风速和纵向风速，生成方式如下如下： for (var j = 0; j < this.rows; j++) { rows = []; for (var i = 0; i < this.cols; i++, k++) { uv = this._calcUV(uComponent[k], vComponent[k]); rows.push(uv); } this.grid.push(rows); }棋盘格最终格式如下（只做示意）: [ [ [ 1.87,3.12 ], [ 2.17,1.59 ], [ 2.17,1.59 ] ], [ [ 1.87,3.12 ], [ 2.17,1.59 ], [ 2.17,1.59 ] ] ] ok，棋盘有了，下一步就是添加粒子了风场里面应该是由很多股风在刮的，每股风都有一个初始的位置，所以我们这里就随机在棋盘里创建2000（100000个怎么样，你可以试试，可以间接测试你的电脑性能^_^）个点，作为每股风的起点。粒子属性如下： /**** *粒子对象 ****/ var CanvasParticle = function () { this.x = null;//粒子初始x位置(相对于棋盘网格，比如x方向有360个格，x取值就是0-360，这个是初始化时随机生成的) this.y = null;//粒子初始y位置(同上) this.tx = null;//粒子下一步将要移动的x位置，这个需要计算得来 this.ty = null;//粒子下一步将要移动的y位置，这个需要计算得来 this.age = null;//粒子生命周期计时器，每次-1 this.speed = null;//粒子移动速度，这个属性没有实质作用，可以根据这个数值大小进行不同颜色的渲染 };这里说一下age参数的作用，标识粒子存活的时间，值越大，风的轨迹拖动的就越长，可以自己试试调整这些参数，看看具体效果。 万事俱备，只待起风了。requestAnimationFrame，非常熟悉的一个api，这样风就能刮起来了。 var then = Date.now(); (function frame() { self.animateFrame = requestAnimationFrame(frame); var now = Date.now(); var delta = now - then; if (delta > self.frameTime) { then = now - delta % self.frameTime; self.animate(); } })();requestAnimationFrame会循环调用animate方法，animate方法主要是实时计算每个粒子的位置、当前位置的速度，下一次将要移动的位置，每计算一次，age参数-1，直到为0。计算完成后进行绘图操作。 比如当前某个粒子，它的经纬度是（118.369898,37.689786），那么根据风场范围，是不是可以计算出当前粒子所在棋盘格的位置，比如是（126.83,96.61），这里问题出现了，它的位置是小数，但棋盘格位置都是整数，怎么办呢？我们可以通过Math.floor或者Math.ceil进行取整，这样就能拿到当前位置的风速了，但是这么计算结果非常不精确，显示效果很差，所以我们通过双线性插值算法（如果感兴趣，可以看看这篇文章：双线性插值）进行计算，这样就能计算出比较准确的速度值了，根据得到的横向、纵向速度值，计算出粒子下一次要到达的位置。如此循环往复，粒子就能在图上动起来了。 现在面临一个问题，比如粒子生命周期结束了，又比如粒子移动到风速是0的位置了，那么这个粒子将永远停留在这个地方，不动了；或者移出屏幕了，我们会发现风越来越少，最后界面上什么都没有了，显然这个时候就需要对该粒子进行重新赋值，以保证屏幕上总是有那么多的风在刮。 以上风场的所有逻辑就结束了，要想在界面上看到风场流动，canvas就登场了： this.canvasContext.fillStyle = "rgba(0, 0, 0, 0.97)"; this.canvasContext.globalAlpha = 0.6; this.animate(); _drawLines: function () { var self = this; var particles = this.particles; this.canvasContext.lineWidth = self.lineWidth; //后绘制的图形和前绘制的图形如果发生遮挡的话，只显示后绘制的图形跟前一个绘制的图形重合的前绘制的图形部分，示例：https://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_globalcompop_all this.canvasContext.globalCompositeOperation = "destination-in"; this.canvasContext.fillRect(0,0,this.canvasWidth,this.canvasHeight); this.canvasContext.globalCompositeOperation = "lighter";//重叠部分的颜色会被重新计算 this.canvasContext.globalAlpha = 0.9; this.canvasContext.beginPath(); this.canvasContext.strokeStyle = this.color; particles.forEach(function (particle) { var movetopos = self._map(particle.x, particle.y); var linetopos = self._map(particle.tx, particle.ty); self.canvasContext.moveTo(movetopos[0],movetopos[1]); self.canvasContext.lineTo(linetopos[0],linetopos[1]); }); this.canvasContext.stroke(); },我们看到的风场，是流动线的效果，但是我们的数据只是每个粒子的当前位置和将要移动的位置，怎么在canvas里就成了流动线的效果呢？这个主要是canvas的globalAlpha和globalCompositeOperation在起作用，每次绘制透明度都是0.6，之前绘制的慢慢的就越来越透明最后看不见，所以看到的就是流动线效果。还有其他几个参数上面都备注做了说明。 以下是风场的封装类，主要包含三个对象： CanvasWindy：风场类，创建风场，提供了非常丰富的可配置参数CanvasWindField：棋盘类，初始化时生成棋盘，用来计算粒子的走向CanvasParticle：粒子，起风就靠它了， /**** *风场类 ****/ var CanvasWindy = function (json,params) { //风场json数据 this.windData = json; //可配置参数 /** * extent 风场绘制时的地图范围，范围不应该大于风场源数据的范围，顺序：west/east/south/north，有正负区分，如：[110,120,30,36] * extent参数可以结合使用的地图框架（arcgisjs、leaflet、ol等）动态调整，达到地图缩放时风场同步更新，extent参数改变后需要重新生成风场（redraw函数） */ this.extent = params.extent || []; this.canvasContext = params.canvas.getContext("2d");//canvas上下文 this.canvasWidth = params.canvasWidth || 300;//画板宽度 this.canvasHeight = params.canvasHeight || 180;//画板高度 this.speedRate = params.speedRate || 0.15;//风前进速率，可以用该数值控制线流动的快慢，值越大，越快 this.particlesNumber = params.particlesNumber || 20000;//初始粒子总数，根据实际需要进行调节 this.maxAge = params.maxAge || 120;//每个粒子的最大生存周期 this.frameTime = 1000/(params.frameRate || 10);//每秒刷新次数，因为requestAnimationFrame固定每秒60次的渲染，所以如果不想这么快，就把该数值调小一些 this.color = params.color || '#ffffff';//线颜色，提供几个示例颜色['#14208e','#3ac32b','#e0761a'] this.lineWidth = params.lineWidth || 1;//线宽度 //内置参数 this.generateParticleExtent = [];//根据风场绘制时的extent，计算粒子随机生成时的范围（指的是棋盘网格的行列范围） this.windField = null; this.particles = []; this.animateFrame = null;//requestAnimationFrame事件句柄，用来清除操作 this._init(); }; CanvasWindy.prototype = { constructor: CanvasWindy, _init: function () { var self = this; // 创建风场网格 this.windField = this.createField(); //如果风场创建时，传入的参数有extent，就根据给定的extent，让随机生成的粒子落在extent范围内 if(this.extent.length!=0){ this.extent = [ Math.max(this.windField.west-180,this.extent[0]), Math.min(this.windField.east-180,this.extent[1]), Math.max(this.windField.south,this.extent[2]), Math.min(this.windField.north,this.extent[3]) ]; var resHeader = this.windData[0]['header']; var nx=resHeader.nx, ny=resHeader.ny, west = resHeader['lo1'], east = resHeader['lo2'], south = resHeader['la2'], north = resHeader['la1']; //计算extent左上角，右下角所在棋盘格的xy位置，加180是因为原始风向数据东西纬度是0-360表示的，根据实际数据可动态调整 this.generateParticleExtent.push(((this.extent[0]+180)-west)/(east-west)*(nx-2));//左 this.generateParticleExtent.push(((this.extent[1]+180)-west)/(east-west)*(nx-2));//右 this.generateParticleExtent.push((north-(this.extent[2]))/(north-south)*(ny-2));//下 this.generateParticleExtent.push((north-(this.extent[3]))/(north-south)*(ny-2));//上 } // 创建风场粒子 for (var i = 0; i < this.particlesNumber; i++) { this.particles.push(this.randomParticle(new CanvasParticle())); } this.canvasContext.fillStyle = "rgba(0, 0, 0, 0.97)"; this.canvasContext.globalAlpha = 0.6; this.animate(); var then = Date.now(); (function frame() { self.animateFrame = requestAnimationFrame(frame); var now = Date.now(); var delta = now - then; if (delta > self.frameTime) { then = now - delta % self.frameTime; self.animate(); } })(); }, //根据现有参数重新生成风场 redraw:function(){ window.cancelAnimationFrame(this.animateFrame); this.particles = []; this.generateParticleExtent = []; this._init(); }, // _reGenerateGrid:function(){ // var resHeader = this.windData[0]['header']; // var nx=resHeader.nx, // ny=resHeader.ny, // west = resHeader['lo1']; // east = resHeader['lo2']; // south = resHeader['la2']; // north = resHeader['la1']; // field=this.windField; // //计算extent左上角，右下角所在棋盘格的xy位置，加180是因为原始方向数据东西纬度是0-360表示的 // var west_northuv = field.getIn((this.extent[0]+180-west)/(east-west)*nx,(north-this.extent[3])/(north-south)*ny); // var east_southuv = field.getIn((this.extent[1]+180-west)/(east-west)*nx,(north-this.extent[2])/(north-south)*ny); // var uComponent=[],vComponent=[]; // for() // this.windData.lo1 = this.extent[0]+180; // this.windData.lo2 = this.extent[1]+180; // this.windData.la1 = this.extent[3]; // this.windData.la2 = this.extent[2]; // this.windData[0].data = []; // this.windData[1].data = []; // this.windField = this.createField(); // }, createField: function () { var data = this._parseWindJson(); return new CanvasWindField(data); }, animate: function () { var self = this, field = self.windField; var nextX = null, nextY = null, xy = null, uv = null; self.particles.forEach(function (particle) { if (particle.age 0) { var x = particle.x, y = particle.y, tx = particle.tx, ty = particle.ty; if (!field.isInBound(tx, ty)) { particle.age = 0; } else { uv = field.getIn(tx, ty); nextX = tx + self.speedRate * uv[0]; nextY = ty + self.speedRate * uv[1]; particle.x = tx; particle.y = ty; particle.tx = nextX; particle.ty = nextY; particle.age--; } } }); if (self.particles.length = 0 && y < this.rows - 2)) return true; return false; } }; /**** *粒子对象 ****/ var CanvasParticle = function () { this.x = null;//粒子初始x位置(相对于棋盘网格，比如x方向有360个格，x取值就是0-360，这个是初始化时随机生成的) this.y = null;//粒子初始y位置(同上) this.tx = null;//粒子下一步将要移动的x位置，这个需要计算得来 this.ty = null;//粒子下一步将要移动的y位置，这个需要计算得来 this.age = null;//粒子生命周期计时器，每次-1 this.speed = null;//粒子移动速度，可以根据速度渲染不同颜色 };各个参数及内部方法都已做了详细说明，应该很容易看懂，风场初始化代码如下： var windycanvas = document.getElementById("windycanvas"); //除了canvas参数必须指定外，其他可以不传 var params = { // extent:[73.6666,135.0416,3.86666,53.55],//中国范围 canvas:windycanvas, canvasWidth:window.innerWidth, canvasHeight:window.innerHeight, speedRate:0.15, particlesNumber:10000, maxAge:120, frameRate:10, color:'#e0761a', lineWidth:2, }; windy = new CanvasWindy(response, params); extent：风场绘制时的地图范围，范围不应该大于风场源数据的范围，顺序：west/east/south/north，有正负区分，如：[-110,120,-30,36]speedRate：风前进速率，可以用该数值控制线流动的快慢，值越大，越快frameTime：每秒刷新次数，因为requestAnimationFrame固定每秒60次的渲染，所以如果不想这么快，就把该数值调小一些其他参数应该很好理解就不做说明了还是那句老话，只有跟地图结合才显得有生命力，与地图结合只需要随机生成粒子时使用经纬度，再结合地图api，进行坐标转换就可以叠加上去了，无论二维还是三维，都是以一样的。 后续会持续更新二维地图（基于arcgisjs）风场叠加和三维（cesium）风场叠加的案例。 这里提供本示例源码下载，没有做详细测试，如果有bug，可以留言修正。 源码下载 |
【本文地址】
今日新闻 |
推荐新闻 |