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

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

1 个答案: