首页 / OpenLayers / 使用示例
面纹理填充
规划用地常用斜纹、网格区分性质;把 Canvas 图案塞进 ol.style.Fill,就能代替纯色色块。
源码与运行效果
说明
Fill 的 color 参数除字符串外也接受 Canvas 图案对象。
示例先画一块 12×12 的透明背景方块,再描两条斜线,用 createPattern() 得到可平铺的纹理;
切换按钮时改变线条间距并重建图案,观察密度变化。
| 操作 | 结果 |
|---|---|
| 初始状态 | 两个地块显示蓝色斜纹 |
| 点击「密集纹理」 | 斜线间距缩小,纹理变细 |
| 点击「纯色」 | 填充退回半透明纯色 |
图案以屏幕像素平铺,缩放时纹理密度不变,适合表达属性而不干扰几何形状的判读。