在 openlayers 3 中，如何用 url 中的图片填充多边形？

Question

我想在多边形中添加图片，但是，我在openlayers 3中没有找到这样的功能。有什么办法可以实现这一点吗？

提前致谢！

Answer 1

从Pull Request #4632开始，您可以使用CanvasRenderingContext2D.fillStyleasol.style.Fill#color属性并创建一个模式。

像这样的东西：

var cnv = document.createElement('canvas');
var ctx = cnv.getContext('2d');
var img = new Image();
img.src = 'https://i.imgsafe.org/73d1273.png';

img.onload = function(){
  var pattern = ctx.createPattern(img, 'repeat');

  // featurePoly is ol.Feature(new ol.geom.Polygon(...))
  featurePoly.setStyle(new ol.style.Style({
    fill: new ol.style.Fill({
      color: pattern
    })
  }));
};

现场演示。