How to hide some parts of an image layer with OpenLayers?

Question

My Problem

I'm currently displaying a layer image above a Google Maps base layer. I would like, when the user check/uncheck some checkboxes, that some parts of this image layer disappear, and the base layer appears instead these parts.
But I want the other parts still visible with the same opacity.

---

Explanations

The image parts to hide are polygons. Those polygons are already generated as layers and are above my image layer. I could put a black background color to hide the wanted image parts, but it wouldn't display the base layer instead...
I'm stuck.

---

Solutions I thought about

I would like you to say me if that's possible and, if you can, how to do it.

I'm not asking for some code, I can do it myself, I'm just kind of a newbie at OpenLayers and I'd like someone to help me to understand how it works. Plus, I have to add functionnalities to an already written code so it's not very easy.

Here are data I have, I removed the ones which are not useful (this is only an example, empty data are usually filled with correct values).

The images :

images[id] = {
    name: "Image",
    image_date: '2012/08/25',
    image_path : 'static/path/to/image',
    width : '250',
    height : '250',
    georef_north : '',
    georef_south : '',
    georef_east : '',
    georef_west : ''
};

And the polygons :

polygons[id] = {
    name:'',
    longitude:'',
    latitude:''
};

I'm getting them like that via WFS protocol like this :

layers['blockLayer'][i] = new OpenLayers.Layer.Vector("Block", {
        strategies: [new OpenLayers.Strategy.BBOX()],
        filter: VMMS.GIS.GetBlockFilter(i),
        protocol: new OpenLayers.Protocol.WFS({
            url:  "../vine/jsGeoserver",
            version: "1.1.0",
            featureType: "block",
            featureNS : urlGeoserver + dataStore ,
            featurePrefix : dataStore ,
            srsName: "EPSG:900913",
            //srsName: "EPSG:4326",
            geometryName: "block_geom",
            schema : urlGeoserver +"wfs/DescribeFeatureType?version=1.1.0&typename=" + dataStore +":block"

        }),
        projection : proj_spherMerc,
        //projection : proj_WGS84,
        styleMap : StyleBlockWithOpacity
    });

First Solution

Why wouldn't we put the image layer in each polygon layer, and display only the layers we want to display ?

Would that work ? I'm not actually sure about that and I don't want to get into it if it's not realizable. Because I don't know if I can display an image IN a layer and not entire, and it has to be well placed in the map and in the layer... Though it seems to me it's doable.

Second Solution

Why wouldn't we display the base layer again above the image to hide some parts ? The image would still be here, but as the base layer would be on top of it, we wouldn't see it.

This solution seems to me even less doable, or, at least, very heavy.

An example image, it's what I'm currently displaying : There's the google maps base layer, then the image blue and green, and all forms are polygons layers above the image.
Screenshot

---

Thank you all for your answers !

Answer 1

One way would be to host your image polygons as WMS using Geoserver, ArcGIS Server or something similar. Each image polygon representing a different feature.

Then use OpenLayers.Layer.WMS to add it as a layer in OpenLayers.

Then as the user clicks to hide them you provide the WMS layer with a filter which would only show the features/images you want by ID or some other property. like:

GeoServer Docs

http://<hostname>/wms?service=WMS&version=1.1.1&request=GetMap&....&cql_filter=IN ('id_1','id_2','id_3')

Here are some different ways you could modify the WMS filters:

• Non_CQL
• CQL