Mapbox GL JS动态属性值表达式问题:circle-radius渲染失败
解决Mapbox circle-radius动态属性缩放的表达式错误问题
问题原因
你遇到的circle-radius: Expected number but found object instead报错,是因为错误地将动态属性选择的表达式放在了原本仅支持静态属性名的property字段中,且用literal包裹整个对象的写法不符合Mapbox表达式规则——circle-radius要求返回数值类型,但你的写法返回了对象,导致图层无法渲染。
正确写法
要实现动态选择属性+指数缩放的效果,需要用Mapbox的interpolate表达式重构整个逻辑,直接返回计算后的数值:
"circle-radius": [ "interpolate", ["exponential", 1], // 对应原配置的type: "exponential",1为指数底数 // 动态选择要使用的属性值:优先取"other",不存在则取"radius" ["case", ["has", "other"], ["get", "other"], ["get", "radius"]], // 缩放停止点,与原配置的stops格式一致 [{ zoom: 9, value: 1 }, 10], [{ zoom: 9, value: 10 }, 80] ]
说明
["case", ["has", "other"], ["get", "other"], ["get", "radius"]]:完成动态属性选择逻辑,返回对应的属性数值interpolate配合exponential类型,实现原配置中基于属性值和缩放级别的指数缩放效果,最终返回合法的数值类型,满足circle-radius的要求
内容的提问来源于stack exchange,提问作者dmarr
相关产品推荐
相关产品推荐

