使用 canvaspattern 设置几何图形的笔画样式

Question

我想用这样的方式设置多边形笔划的样式：

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

我试过：

1) 创建图像的CanvasPattern（这是png格式的符号）。

2) 将图案分配给ol.style.Stroke的颜色。

第 1 步进展顺利。

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

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

顺便说一下，我可以通过将创建的符号的 CanvasPattern 分配给 ol.style.Fill 的颜色来填充多边形。但是，通过这种方式，我用符号填充了多边形；我只希望笔画有一个图案。 "strange" 这里的意思是，根据文档，ol.style.Fill 的属性颜色与 ol.style.Stoke 的类型相同。无论如何，我们将不胜感激。

Answer 1

图案也可以用作描边颜色。

// Create pattern on image load
var image = new Image();
image.onload = function() {
  var ctx = document.createElement('canvas').getContext("2d");
  var pattern = ctx.createPattern(image,"repeat");
  // create style with the pattern
  var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 8,
      color: pattern
    })
  });
  // use it on vector layer
  vector.setStyle(style);
};
// Load image
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAGFBMVEUAAACPjwCmpgCbmwCCggD+/gCXlwD//wDWAMTYAAAAB3RSTlOAsr64rP62hR4cWgAAADpJREFUCNetzTEOACAIA8ACYv//YwVJxF0mLm0AJAUxtjeCPq6IkvKwNYM9c/ko1AdLTLxNtEyZbFcWKysC1htDphIAAAAASUVORK5CYII='

参见示例：https://codepen.io/viglino/pen/erErXb

使用 canvaspattern 设置几何图形的笔画样式

Styling the stroke of a geometry with a canvaspattern

openlayers