이미지를 사용하여 OpenLayers에서 레이어를 채우려면 어떻게해야합니까?

Question

OpenLayers를 사용하여지도를 그리는 중입니다. 해당 국가의 사진이있는 국가를 나타내는 다각형을 채우고 싶습니다. ol.style.Fill의 color에 CanvasPattern을 전달할 수 있지만 이미지를 생성 할 수는 없습니다. 나는 사진이 비동기로드되어 있기 때문에 생각 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'); 
} 

:

여기 내 코드 및 전체 예제와 JSfiddle입니다. 다른 예제는 photo.onload 메서드에서 패턴을 만들지 만 반환하는 방법을 모르겠습니다.

최선을 다해 나중에 다른 사진으로 애니메이트하거나 업데이트 할 수있는 캔버스를 반환하고 싶지만 나라마다 단 하나의 정적 이미지 만 해결할 것입니다!

Answer 1

이미지의 onload 처리기에서 스타일의 채움 색상을 설정해야합니다. 채우기의 색상은 스타일 함수가 호출되기 전에 스타일 기능에 setPattern 함수를 호출 할 수 있도록 설정 될 필요가 있다고

는

/** 
* @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'; 
} 

참고. 레이어를로드하기 전에 스타일을 만드는 것이 좋습니다.