[GIS] How to hide some parts of an image layer with OpenLayers

javascriptlayersmaskingopenlayers-2

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 !

Best Answer

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

Related Solutions

WFS Layer – How to Initialize in OpenLayers

Take a look at this code example:

var adresspt_wfs = new OpenLayers.Layer.Vector("Address points WFS", {
 strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
    protocol: new OpenLayers.Protocol.WFS({
    url: "http://localhost:8080/geoserver/wfs",
    featurePrefix: "XXXX" //<-- GeoServer workspace name
    featureType: "RAILWAY",//<-- layer name
    featureNS: "http://localhost:8080/MIA", //<-- Edit Workspace Namespace URI
    srsName: "EPSG:900913",
    geometryName: "SDO_GEOMETRY" //<-- geometry field
  })
});

The featureNS property is equivalent to your Namespace URI in the Edit Workspace page of GeoServer:

enter image description here

Here's a tutorial

[GIS] How to speed up OpenLayers with WFS in IE

We are using OpenLayers 2.13.1 with the Dutch PDOK map implementation and were experiencing severe performance problems with WFS sources. I found a simple way to speed IE up by about a factor 2. It is still slow, but at least there is a significant improvement. Also it seems to use less CPU than before.

When profiling, I noticed that the most time is spent in the XMLHttpRequest.responseText property. Looking at the OpenLayers code, I saw that a version of https://code.google.com/p/xmlhttprequest/ is used. That class was intended to emulate XMLHttpRequest for Internet Explorer versions lacking a built-in XMLHttpRequest object. However, this should not be required in IE9 and newer, and Open Layers 2.x does not work properly in older IE versions. IE < 9 has become very uncommon anyway, even for the most convervative of our customers.

To make a long story short, here is how to speed up Open Layers 2 in IE:

Start with OpenLayers.debug.js (unminified code)
Look for the XMLHttpRequest.js code block
Replace the browser sniffing code at the start of the class by:

var bGecko = !!window.controllers, bIE = false, bIE7 = false;
Look for occurences of the text "ActiveXObject". Ensurte that all code depending on this is not executed. E.g.,

if (false /* window.ActiveXObject */) {
Finally, a fix is needed for a namespace problem in IE. Look for this function inside OpenLayers.Format.XML:

write: function (node) {
Add this code just before the closing bracket of the function:

if ("ActiveXObject" in window) // If IE is detected

data = data.replace(new RegExp('xmlns:NS\d+="" NS\d+:', 'g'), '');
After testing the fix, re-minify the code for release, e.g., by using Microsoft's Ajax minifier.

The replace statement was always needed to get WFS to work in IE11 and Edge. After disabling the XMLHttpRequest emulation, the same applies to older IE versions as well.

[edit]In addition to the above, we should fully avoid accessing request.responseText in IE. With the built-in XMLHttpRequst object, responseXML should always be available and valid. In my test, the original code spent about 8000 ms in responseText and 600 ms in responseXML. Actually, we do not need responseText at all in WFS.

Additional changes:

In function fGetDocument(oRequest) remove all code related to sResponse, leave only oDocument
In function fSynchronizeValues(oRequest) set oRequest.responseText = '';
Replace var response = arcxml.parseResponse(request.responseText); by var response = arcxml.parseResponse(request);

With these changes, no more time is spent in responseText, while the time spent in responseXML does not increase. I have also tested WMS and WMTS layers, they still work as before. I've repeated all tests in firefox and chrome, dit not find side effects.

[/edit]

Hope this helps,

Berend