如何使用圖像填充OpenLayers中的圖層？

我正在使用OpenLayers繪製地圖，並且想填充描述國家和來自該國家的照片的多邊形。我知道我可以通過一個CanvasPattern到ol.style.Fill的color，但我不知道要生成一個圖像。如何使用圖像填充OpenLayers中的圖層？

這裏是我的代碼，並有一個完整的示例的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方法中創建模式，但我不知道如何返回該模式。

最好我想返回一張畫布，我可以稍後使用其他照片進行動畫或更新，但是我只會爲每個國家/地區的靜態圖像解決問題！

來源

2017-09-07 Crummy

您必須在圖像的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功能。加載圖層之前最好創建樣式。

來源

2017-09-08 05:13:16 ahocevar

不錯的一個!!!!!!!! – pavlos

感謝您的回答。我不知道如何在生成地圖後設置樣式，但是，您能幫忙嗎？ – Crummy

爲了回答這個問題，你必須提供更多的上下文，也就是你當前正在使用你的代碼的地方（樣式函數？在其他地方？），以及如何（設置圖層上的樣式或功能？） – ahocevar

如何使用圖像填充OpenLayers中的圖層？

回答

相關問題