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

Canvas 渐变与图案填充

填充色不必是纯色,渐变对象和平铺图案都能直接交给样式使用。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

ol.style.Fill 的 color 除了十六进制字符串,还接受 CanvasGradient 与 CanvasPattern,画布上做好的渐变、图案可以直接拿来填充多边形。

渐变用 createLinearGradient 建三个色标,图案用 8×8 的画布画一个圆点再 createPattern。切换填充方式后调用 layer.changed() 通知图层重绘。

要点

  • 渐变与图案都在符号化阶段生效,随要素整体缩放。
  • 图案画布边长取 2 的幂,平铺接缝更稳。
  • layer.changed() 比重新 setStyle 轻,适合频繁切换。

图案画布四周留 1 像素透明边,能避免平铺时出现硬接缝。