首页 / OpenLayers / 使用示例
Canvas 渐变与图案填充
填充色不必是纯色,渐变对象和平铺图案都能直接交给样式使用。
源码与运行效果
说明
ol.style.Fill 的 color 除了十六进制字符串,还接受 CanvasGradient 与 CanvasPattern,画布上做好的渐变、图案可以直接拿来填充多边形。
渐变用 createLinearGradient 建三个色标,图案用 8×8 的画布画一个圆点再 createPattern。切换填充方式后调用 layer.changed() 通知图层重绘。
要点
- 渐变与图案都在符号化阶段生效,随要素整体缩放。
- 图案画布边长取 2 的幂,平铺接缝更稳。
layer.changed()比重新setStyle轻,适合频繁切换。
图案画布四周留 1 像素透明边,能避免平铺时出现硬接缝。