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

Question

我正在使用 OpenLayers 绘制 map ，我想用该国家/地区的照片填充描述该国家/地区的多边形。我知道我可以将 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 方法中创建图案，但我不知道如何返回它。

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

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函数。最好在加载图层之前创建样式。