【mapboxDemo合集】设置天空动画

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);

合集