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

面纹理填充

规划用地常用斜纹、网格区分性质;把 Canvas 图案塞进 ol.style.Fill,就能代替纯色色块。

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

说明

Fill 的 color 参数除字符串外也接受 Canvas 图案对象。 示例先画一块 12×12 的透明背景方块,再描两条斜线,用 createPattern() 得到可平铺的纹理; 切换按钮时改变线条间距并重建图案,观察密度变化。

操作结果
初始状态两个地块显示蓝色斜纹
点击「密集纹理」斜线间距缩小,纹理变细
点击「纯色」填充退回半透明纯色

图案以屏幕像素平铺,缩放时纹理密度不变,适合表达属性而不干扰几何形状的判读。