如何使用图像填充 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 方法中创建模式，但我不知道如何 return 那。

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

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

How do I use an image to fill a layer in OpenLayers?

javascript

openlayers