【mapboxDemo合集】设置天空动画

发表于2021-12-20更新于2023-05-04字数统计318阅读次数阅读次数

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
// Run a timing loop to switch between day and night
let lastTime = 0.0;
let animationTime = 0.0;
let cycleTime = 0.0;
let day = true;
  
// const initialBearing = map.getBearing();

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;
  }
  
  // const rotation = initialBearing + animationTime * 2.0;
  // map.setBearing(rotation % 360);
  
  lastTime = time;
  
  window.requestAnimationFrame(frame);
}
window.requestAnimationFrame(frame);

合集