Openlayers 使用画布图案设置几何体笔划的样式

我希望以如下方式设置多边形笔划的样式：

png格式的重复图像如下所示：

我试过：

1） 创建图像的画布图案（这是png格式的符号）

2） 将图案指定给ol.style.Stroke的颜色

第一步进展顺利

但是步骤2不起作用，因为ol.style.Stroke的颜色属性应该是ol.color类型，尽管Openlayers的文档中ol.style.Stroke的颜色也可以是ol.ColorLike，这意味着也应该允许CanvasPattern

也许有人知道另一种方法来完成同样的事情

---

顺便说一下，我可以通过将创建的符号画布图案指定为ol.style.fill的颜色来填充多边形。然而，以这种方式，我用符号填充多边形；我只是希望笔划有一个模式。这里“奇怪”的是，根据文档，ol.style.Fill的属性颜色与ol.style.Stoke的类型相同。无论如何，我们非常感谢您的帮助。

图案也可以用作斯托克色

//加载图像时创建图案
var image=新图像（）；
image.onload=函数（）{
var ctx=document.createElement（'canvas'）.getContext（“2d”）；
var pattern=ctx.createPattern（图像“repeat”）；
//使用图案创建样式
var style=新的ol.style.style({
笔划：新的ol风格笔划({
宽度：8，
颜色：图案
})
});
//在矢量层上使用它
向量集样式（样式）；
};
//加载图像
image.src='数据：image/png；base64，Ivborw0kgoaaaAnsuhueugaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaPaaPaaPaaGaaGaaGaaGaaGaaGaaGfBmEuAcPjWcPgCbMwCgCgGdGdGdG+/gCXlwD/WdWamTyaaBaaBaaBaaBaaBfR3RStLoasr64RP62HR4R4HR4CWgAwGaaAdGaaAdPjRadJrE

---

参见示例：

图案也可以用作斯托克色

//加载图像时创建图案
var image=新图像（）；
image.onload=函数（）{
var ctx=document.createElement（'canvas'）.getContext（“2d”）；
var pattern=ctx.createPattern（图像“repeat”）；
//使用图案创建样式
var style=新的ol.style.style({
笔划：新的ol风格笔划({
宽度：8，
颜色：图案
})
});
//在矢量层上使用它
向量集样式（样式）；
};
//加载图像
image.src='数据：image/png；base64，Ivborw0kgoaaaAnsuhueugaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaPaaPaaPaaGaaGaaGaaGaaGaaGaaGfBmEuAcPjWcPgCbMwCgCgGdGdGdG+/gCXlwD/WdWamTyaaBaaBaaBaaBaaBfR3RStLoasr64RP62HR4R4HR4CWgAwGaaAdGaaAdPjRadJrE

---

参见示例：

谢谢。我为Openlayers使用了一个typescript定义文件。根据该文件，画布图案不被接受为有效的颜色类型。然而，您是对的，Openlayers确实接受画布模式，因此交付的typescript定义文件不正确。你已经回答了我的问题，尽管我会提出另一个问题，因为结果不是我想要的，如上图所示；点图像应该根据多边形轮廓的斜率旋转。如果您正在沿着多边形绘制散列线，您应该看以下示例：谢谢。我为Openlayers使用了一个typescript定义文件。根据该文件，画布图案不被接受为有效的颜色类型。然而，您是对的，Openlayers确实接受画布模式，因此交付的typescript定义文件不正确。你已经回答了我的问题，尽管我会提出另一个问题，因为结果不是我想要的，如上图所示；点图像应根据多边形轮廓的坡度旋转。如果要沿多边形绘制散列线，请参见以下示例：