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

多边形图案填充

面图层用斜纹、圆点、网格三种图案填充,切换时只改一个属性名。

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

说明

图案必须先通过 addImage 注册成 sprite,再在 fill-pattern 里引用名字。示例的图案由 canvas 生成,32×32 平铺。

移除 fill-pattern 属性即可回到纯色填充,不需要换图层。

配置取值说明
addImage名字 + 像素数据注册图案
fill-pattern图案名引用已注册图案
removePaintProperty属性名回到纯色

图案像素要无缝:绘制时让线条跨越画布边界,平铺后才不会出现断缝。