如何使用图像填充 OpenLayers 中的图层？

Question

我正在使用 OpenLayers 绘制地图，我想用来自该国家/地区的照片填充描述该国家/地区的多边形。我知道我可以将 CanvasPattern 传递给ol.style.Fill 的color，但我不知道生成图像。

这是我的代码，以及带有完整示例的 JSfiddle：http://jsfiddle.net/07366L44/5/

function getPhoto() {
    var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var photo = new Image();
  photo.src = 'http://i.imgur.com/C6PL9tB.jpg';

  return context.createPattern(photo, 'repeat');
}

我认为这是因为照片是异步加载的。其他示例在 photo.onload 方法中创建模式，但我不知道如何返回。

最理想的情况是我想返回一个画布，我可以在以后用其他照片制作动画或更新，但我会满足于每个国家/地区只有一个静态图像！

Answer 1

您必须在图像的 onload 处理程序中设置样式的填充颜色。

/**
 * @param {ol.style.Style} style Style to set the pattern on.
 */
function setPattern(style) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var photo = new Image();
  photo.onload = function() {
    canvas.width = photo.width;
    canvas.height = photo.height;
    var pattern = context.createPattern(photo, 'repeat');
    style.getFill().setColor(pattern);
  }
  photo.src = 'http://i.imgur.com/C6PL9tB.jpg';
}

注意，在调用样式函数之前需要设置填充的颜色，所以不能在样式函数中调用setPattern函数。最好在加载图层之前创建样式。