的OpenLayers 3圖像屏蔽

我嘗試在我的地圖上添加前景圖像掩碼，某種遮蔽框。的問題是，我沒能找到一個很好的解決方案，試圖這樣做：的OpenLayers 3圖像屏蔽

precompose/postcompose過載（繪圖與畫布的CTX圖像）
添加層
將覆蓋
添加一個div放在地圖（事件傳播的問題和jQuery例外）

有沒有人遇到這個問題？

來源

2015-07-21 Thom Armax

事情是在[這個例子]（完整解決方案http://openlayers.org/en/master/實例/層clipping.html）？ – tsauerwein

是類似的東西，但像[這]一個SVG圖像（http://safari.am/images/frame_shadow.png）。我已經通過由圖像繪製替換貝塞爾嘗試這樣做的例子，但作爲我的地圖是頻繁地（移動站）的是僞像的每個重繪 –

我修改本實施例中[這種方式]（HTTPS刷新：//的jsfiddle達網絡/ k34t4xw4/1 /），但我已經有工件移動地圖 –

一種解決方案是在postcompose事件綁定。這裏是JS代碼，使其工作：

 


    var osm = new ol.layer.Tile({ 
     source: new ol.source.OSM() 
    }); 

    var map = new ol.Map({ 
     layers: [osm], 
     target: 'map', 
     controls: ol.control.defaults({ 
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
      collapsible: false 
     }) 
     }), 
     view: new ol.View({ 
     center: [0, 0], 
     zoom: 5 
     }) 
    }); 

    var image = new Image(); 
    var loaded = false; 
    image.src = 'http://safari.am/images/frame_shadow.png'; 
    image.onload = function() { 
     loaded = true; 
    }; 

    osm.on('postcompose', function(event) { 
     var ctx = event.context; 
     if(loaded) 
      ctx.drawImage(image, 0, 0); 
     ctx.restore(); 
    });

您可以在以下JSFiddle

來源

2015-07-22 09:34:10

的OpenLayers 3圖像屏蔽

回答

相關問題