说明

基于mapbox-gl-js api 实现的图层自动轮播切换效果。 原理是通过自动设置图层的 opacity 属性实现轮播切换效果。

限制

• 仅支持具备 paint 属性的图层。

参数

/**
 * 图层过渡控制器
 * 用于控制多个图层之间的渐变切换效果
 * @param map Mapbox地图实例
 * @param layerIds 需要控制的图层ID数组,支持图层组，如 ["layer1", "layer2", ["layer3", "layer4"]]
 * @param options 配置选项
 */
class LayerTransitionController {
  constructor(map, layerIds, options) {
  ...
  }
}

/**
 * 图层过渡控制器配置选项
 * @param startIndex 初始显示的图层索引
 * @param duration 单次过渡动画持续时间（毫秒），默认1000ms
 * @param interval 过渡间隔时间（毫秒），默认3000ms
 * @param defaultOpacity 图层默认不透明度，默认1
 * @param loop 是否循环播放，默认false
 */
interface LayerTransitionOptions {
  startIndex?: number; // 初始显示的图层索引
  duration?: number; // 单次过渡动画持续时间（毫秒），默认1000ms
  interval?: number; // 过渡间隔时间（毫秒），默认3000ms
  defaultOpacity?: number; // 图层默认不透明度，默认1
  loop?: boolean; // 是否循环播放，默认false
}

示例

const map = new mapboxgl.Map({
    ...
})
const layerIds = ['layer1', 'layer2', ['layer3','layer4']] // 图层id数组

const LayerTransitionController = new LayerTransitionController(map, layerIds, {
          duration: 2000, // 过渡动画持续1秒
          interval: 3000, // 停顿3秒切换一次
          loop: true, // 循环切换
        })
        
LayerTransitionController.start() // 开始轮播
LayerTransitionController.stop() // 停止轮播
LayerTransitionController.pause() // 暂停轮播
LayerTransitionController.resume() // 继续轮播