Question

我尝试在地图上添加前景中的图像蒙版，某种阴影框。问题是我尝试通过以下方式找不到合适的解决方案：

预合成/后合成重载（使用画布绘制图像＆nt ctx）
添加图层
添加叠加层
在地图上添加div（事件传播问题和jQuery异常）

有人遇到过这个问题吗？

Answer 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

中找到完整的解决方案

OpenLayers 3图像掩码

1 个答案: