如何基于多要素属性动态设置Mapbox图层样式？

1. 先修复图层缩放范围的错误 #

你代码中"maxzoom": 0的设置完全错误，Mapbox要求maxzoom必须大于等于minzoom（你这里minzoom是12），这个逻辑冲突会导致图层样式解析异常，直接触发颜色错误提示。修改为合理的最大值，比如：

"minzoom": 12,
"maxzoom": 22

2. 修正颜色值与数据类型匹配问题 #

• 你期望未进洞显示红色，但示例代码里写的是白色rgba(255,255,255,0.5)，需要改成红色rgba(255,0,0,0.5)
• 确认round字段的实际存储类型：如果数据里round是数字（比如1、2、3、4），把表达式里的"r1"改成1；如果是字符串（比如"r1"、"r2"），则保持原样，必须和数据值严格匹配，否则==判断不成立，所有数据都会 fallback 到默认颜色

3. 修正后的完整图层代码 #

{
  "id": "app_shotdata_22_putts",
  "source": "clere",
  "source-layer": "app_shotdata_22_putts",
  "type": "circle",
  "layout": {
    "visibility": "none"
  },
  "paint": {
    "circle-radius": 3,
    "circle-color": [
      "case",
      [
        "all",
        ["==", ["get", "round"], "r1"],
        ["==", ["get", "putt_res"], "HOLED"]
      ],
      "rgba(0,100,0,0.5)",
      [
        "all",
        ["==", ["get", "round"], "r1"],
        ["==", ["get", "putt_res"], "MISSED"]
      ],
      "rgba(255,0,0,0.5)",
      "rgba(255,255,255,0.5)" 
    ],
    "circle-stroke-width": 2,
    "circle-stroke-color": "rgba(255,255,255,0.5)"
  },
  "minzoom": 12,
  "maxzoom": 22,
  "metadata": {
    "displayName": "Putts",
    "children": [],
    "isTree": true,
    "isVisible": false
  }
}

4. 实现轮次切换的高效方案 #

不需要修改图层样式，而是通过动态修改图层的filter来控制显示对应轮次的数据，比在case里写全4轮逻辑更高效：

• 切换到第N轮时，设置图层filter为：

  ["==", ["get", "round"], "rN"]
  

  （根据实际数据类型替换"rN"为对应值，比如数字2或字符串"2"）
• 这样图层只会渲染目标轮次的所有推杆，同时case表达式自动区分进洞/未进洞的颜色

5. 额外排查点 #

如果仍报错，检查：

• 所有颜色值格式是否正确：rgba的前三个值必须是0-255的整数，alpha值是0-1的小数，有没有拼写错误（比如少写括号、逗号）
• 确认putt_res字段的取值确实是HOLED和MISSED，大小写完全匹配

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