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:
Demo
WebGL Wind —Running the demo locally
npm installnpm run buildnpm start# open http://127.0.0.1:1337/demo/