Foreword
api documentation cesium official website Address cesium official website api , description of each class of which a detailed description cesium, there is the online examples: cesium official website online examples , this is a good learning material cesium.
At a Glance
1. FIG wind implemented based cesium effect
2. download the source code demo
FIG Benpian achieve cesium wind function, the effect is as follows:
Realization of ideas:
- Field data acquisition sources:
weather data generated by the Global Forecast System (GFS), managed by the National Weather Service. Forecast to produce four times a day, it can be used to download from the NOMADS. These files are located GRIB2 format and contains more than 300 records. We only need a small fraction of these records can be visualized in specific wind data such as pressure line. The following command download 1000 hPa wind vector, using grib2json convert them to JSON format.- Generating a series of random locations on the screen and draw particles are particles
- For each particle, the wind query data to obtain a particle velocity of its current position, and accordingly it moves
- A small portion of the particles is reset to a random location. This ensures that the wind never become empty area
- Fade out the current screen, and draw new particles positioned at the top
Core code
- Wind farm map initialization call
function the Draw () { $ .ajax ({ type: "GET" , URL: "sampleData / Wind / gfs20171227.json", // request data source wind JSON dataType: "JSON" , Success: function (Response) { var = Response header [0 ] .header; Windy = new new Windy (Response, Viewer); the redraw (); }, error: function (errorMsg) { Alert ( "request data failed. 1!" ); } }); } var Timer = null ; // loading FIG wind the Draw (); function redraw() { timer = setInterval(function () { windy.animate(); }, 300); }
- Windy wind farm
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, the _init: function () { // create a wind farm grid the this .windField = the this .createField (); // Create wind particles for ( var I = 0; I <PARTICLES_NUMBER; I ++ ) { the this .particles.push ( the this .randomParticle ( new new Particle ())); } },
......
For more details, see the following article in the link :
Article provides source code, are interested in this column, you can focus on a wave