的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图像屏蔽

回答

相关问题