Mapbox表达式能否用于opacity-transition属性？求正确语法

核心结论 #

Mapbox的过渡配置属性（包括fill-opacity-transition）不支持使用表达式。这类过渡参数（duration、delay）属于全局过渡行为的配置，并非可动态计算的视觉样式属性——只有像fill-color、fill-opacity这类直接控制要素视觉表现的属性才支持表达式语法。

实现基于属性的渐显效果的替代方案 #

要实现按要素year属性分批次渐显的效果，需要将延迟逻辑移到外部代码中，通过动态修改fill-opacity属性配合固定过渡配置来实现：

1. 先给图层设置固定的过渡配置：

map.setPaintProperty('your-fill-layer-id', 'fill-opacity-transition', {
  duration: 1000, // 统一的过渡时长
  delay: 0
});

2. 初始化时将图层所有要素的透明度设为0：

map.setPaintProperty('your-fill-layer-id', 'fill-opacity', 0);

3. 通过外部逻辑按要素year属性设置延迟，逐个触发透明度变化：

// 获取目标图层的所有要素
const features = map.querySourceFeatures('your-source-id', {
  layers: ['your-fill-layer-id']
});

features.forEach(feature => {
  const year = feature.properties.year;
  // 根据year匹配对应延迟
  const delay = {
    '2000': 1000,
    '2001': 2000,
    '2002': 3000
  }[year] || 4000;

  // 延迟后将当前要素的透明度改为1
  setTimeout(() => {
    map.setPaintProperty('your-fill-layer-id', 'fill-opacity', [
      'case',
      ['==', ['get', 'id'], feature.id],
      1,
      ['get', 'fill-opacity'] // 保留其他要素当前透明度
    ]);
  }, delay);
});

原理说明 #

这种方式利用Mapbox对fill-opacity属性的过渡支持，通过外部setTimeout按要素属性控制触发时机，间接实现了不同要素按延迟渐显的效果——把原本想在transition.delay中用表达式实现的逻辑，转移到了外部代码的时序控制里。

内容的提问来源于stack exchange，提问作者interpolack