3

【mapboxDemo合集】设置天空动画

 11 months ago
source link: https://www.msy.plus/2021/12/21/mapbox-sky-animate/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

【mapboxDemo合集】设置天空动画

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

mapbox设置天空动画,案例中为了效果，设置了3秒切换一次

查看运行效果

原理就是mapbox提供的setPaintProperty方法来动态调增图层属性，非常简单这里直接上效果代码

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK