我有一个带有矩形图像的图像层。我想用矢量图层掩盖这个图像,使其适合边界内。我试过这个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);
问题出在剪辑上,所有其他区域的图层都不可见。而在蒙版中,图像图层没有蒙版完成,但所有其他图层都是可见的。 我想要一个输出,就像在启用所有其他图层的情况下剪辑一样/应该是可见的。