Mapbox使用case配置circle-color数据驱动样式时圆点全黑问题排查

核心问题是GeoJSON的属性类型和表达式预期类型不匹配：
你代码中假设num_asc_properties是整数类型，但你提供的GeoJSON示例里该属性是被双引号包裹的字符串类型（值为"59"而非59）。Mapbox GL JS的表达式进行数值比较时，字符串和数字的比较结果永远为false，因此你写的所有case条件都未命中，导致颜色显示异常。

有两种可选修复方式：

• 方案1：预处理GeoJSON数据源，将所有num_asc_properties属性从字符串转为数值类型，去掉属性值外侧的双引号即可。
• 方案2：无需修改数据源，直接在样式表达式中将取到的属性转为数值，用['to-number', ['get', 'num_asc_properties']]替换原有的['get', 'num_asc_properties']，修改后的配置如下：

'circle-color': [
    "case",
    [">=", ["to-number", ["get", 'num_asc_properties']], 100],
    color4,
    [">=", ["to-number", ["get", 'num_asc_properties']], 10],
    color3,
    [">=", ["to-number", ["get", 'num_asc_properties']], 3],
    color2,
    [">", ["to-number", ["get", 'num_asc_properties']], 0],
    color1,
    white
]

额外检查项：如果修改后仍有黑色圆点，确认你定义的color1/color2/color3/color4/white变量为合法的颜色值，支持十六进制、rgb、rgba、标准颜色名等格式，检查是否存在拼写错误。

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