openlayers - 如何在 openalyer 6 中用矢量图层遮盖图像层？

Question

我有一个带有矩形图像的图像层。我想用矢量图层掩盖这个图像，使其适合边界内。我已经尝试过这个https://gis.stackexchange.com/questions/185881/clipping-tilelayer-with-georeferenced-polygon-clipping-mask 但它似乎是一个正常的 vecotr 图层叠加。我想掩盖一个图像层。我的图像层是：

var ext = [677276.6184634935, 998535.6531789962, 680930.1784387273, 1001712.63214407];    
var imageLayer = new ImageLayer({
    source : new Static({
    title: 'imageee',
    url: '/static/wetlandapp/images/idw/idw.png',
    crossOrigin: 'anonymous',
    projection: 'EPSG:32643',
    imageExtent: ext,
    imageSmoothing: true, 
    }),
    //opacity: 0.9,
  });     
map.addLayer(imageLayer);
map.getView().fit(ext); 

我使用 ol-ext 添加了掩码，如下所示：

var dep = data.features[0];
var coords = dep.geometry.coordinates;
var f = new Feature(new MultiPolygon(coords));
var maskk = new Mask({ feature: f, inner:false, fill: new Fill({ color:[255,255,255,0.8] }) }); //, opacity: 0.1
imageLayer.addFilter(maskk);
maskk.fillColor_ = 'rgba(0,255,0,0.2)';
maskk.set('active', true);

输出是

并添加图层剪辑如下：

var clipLayer = new VectorLayer({
        style: null,
        source: new VectorSource({
        features: new GeoJSON().readFeatures(data, {
                    dataProjection: 'EPSG:32643',
                    featureProjection: 'EPSG:32643',
                }),
        }),
    });
    clipLayer.getSource().on('addfeature', function () {
      imageLayer.setExtent(clipLayer.getSource().getExtent());
    });

    var style = new Style({
      fill: new Fill({
        color: 'black',
      }),
    });

    imageLayer.on('postrender', function (e) {
      var vectorContext = getVectorContext(e);
      e.context.globalCompositeOperation = 'destination-in';
      clipLayer.getSource().forEachFeature(function (feature) {
        vectorContext.drawFeature(feature, style);
      });
      e.context.globalCompositeOperation = 'source-over';
    });
    map.addLayer(clipLayer);

输出是：

问题在于剪辑，所有其他区域的图层都不可见。而在 masking 中，图像层没有被屏蔽完成，但所有其他层都是可见的。我想要一个输出，比如在启用所有其他图层的剪辑中/应该是可见的。

标签： openlayersopenlayers-6