mapbox设置天空动画,案例中为了效果,设置了3秒切换一次
查看运行效果
实现方法
原理就是mapbox提供的setPaintProperty
方法来动态调增图层属性,非常简单这里直接上效果代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 let lastTime = 0.0 ;let animationTime = 0.0 ;let cycleTime = 0.0 ;let day = true ; const frame = (time )=> { const elapsedTime = (time - lastTime) / 1000.0 ; animationTime += elapsedTime; cycleTime += elapsedTime; if (cycleTime > 3.0 ) { if (this .map .getLayer ('sky-day' )){ if (day) { this .map .setPaintProperty ('sky-day' , 'sky-opacity' , 1 ); this .map .setPaintProperty ('sky-night' , 'sky-opacity' , 0 ); this .map .setFog ({ 'color' : 'white' }); } else { this .map .setPaintProperty ('sky-day' , 'sky-opacity' , 0 ); this .map .setPaintProperty ('sky-night' , 'sky-opacity' , 1 ); this .map .setFog ({ 'color' : 'rgba(66, 88, 106, 1.0)' }); } } day = !day; cycleTime = 0.0 ; } lastTime = time; window .requestAnimationFrame (frame); } window .requestAnimationFrame (frame);
合集