wind MapboxGl Layer

use

npm install windLayer; var layer = new windLayer(map, { fadeOpacity: 0.996, speedFactor: 0.5, dropRate: 0.003, dropRateBump: 0.01, numParticles:65536, RampColors:{ 0.0: '#3288bd', 0.1: '#66c2a5', 0.2: '#abdda4', 0.3: '#e6f598', 0.4: '#fee08b', 0.5: '#fdae61', 0.6: '#f46d43', 1.0: '#d53e4f' } maskUrl:'./china.json', // windDataInfo:{ //MUST "width": 246, "height": 198, "uMin": -25, "uMax": 25, "vMin": -25, "vMax": 25, }, windDataUrl:'./day', //MUST windDataTime:'2018011700', //MUST isMask:true, extent:[73.66, 3.86, 135.05, 53.55] //MUST });

method

layer.updateWind(windDataTime);

Todo

the wind layer rotate with the Map

API

This project is heavily inspired by the work of:

WebGL Wind — Demo

Running the demo locally

npm install
npm run build
npm start
# open http://127.0.0.1:1337/demo/