经纬志
首页 / MapLibre / 使用示例

按钮改图层颜色

四个色板按钮切换片区填充色,带 300ms 过渡,不闪跳。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

setPaintProperty 改 fill-color 后,对应的 transition 时长决定插值速度。过渡是绘制属性,图层不用重建。

透明度用单独的滑块控制,与颜色过渡互不影响。

配置取值说明
setPaintProperty运行时改样式不重建图层
fill-color-transition300ms颜色插值
fill-opacity-transition300ms透明度插值

过渡只对可插值的属性有效,fill-pattern 这类离散属性切换是瞬间完成的。