[GIS] Hide/show data inside Layer in OpenLayers 4

openlayers

I'm migrating from OpenLayers 2 to 4 and I'm stuck querying a layer.

I want to hide/show some features inside that layer clicking on buttons.

enter image description here

This is my OL2 code for the data layer:

Var Pmfeatlayer = new ol.layer.tile("Orders", url , {layers: sQLayers,
transparent:true, myorders: twSettings.defsel, 
format:'image/png'});

twSettings.defsel it’s an array and contains the restriction/sign IDs and when you click on a legend you add remove that ID from the array.

This is the code to update the layer:

function updateLayerParams() {
  pmfeatlayer.setVisibility(false);
    if (sOrderSel == "") {
      return
    };
  pmfeatlayer.params.MYORDERS =  sOrderSel; [array whit the IDs that 
  changes when you click on a legend button, what's inside is display ]
  pmfeatlayer.redraw();
  pmfeatlayer.setVisibility(true);
}

This is the actual OL4 code:

var pmfeatlayer =
  new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: "http...",
    params: {'LAYERS': sQLayers, myorders: twSettings.defsel, format:'image/png' },
    ratio: 1.1
  })
});

function updateLayerParams() {
pmfeatlayer.setVisible(false);
  if (sOrderSel == "") {
  return
};
 pmfeatlayer.getSource().getParams().myorders = sOrderSel;
 map.render()
 pmfeatlayer.setVisible(true);
}

The new code works and I'm able to see all the data, and I can hide/show part of that data depending on which button you click but you have to zoom/move the map to force the request of new tiles and have the feature on/off.

How can I force a map refresh?

Here a customer live page with OpenLayers 2.

http://www.barnettraffweb.co.uk/main.html

Best Answer

At the end, I found a solution but I don't really like the behavior because it redraws the whole layer and you can see a hidden IDs during the redraw(with the actual amount of data it during 1 second), there is another way to force the Redraw?

function updateLayerParams() {
//update query parameters in map and control
 pmfeatlayer.setVisible(false);

 if (sOrderSel == "") {
return
 };
 pmfeatlayer.getSource().getParams().MYORDERS = sOrderSel;

 pmfeatlayer.getSource().getParams().DTO = dDTo;

 var source = pmfeatlayer.getSource();
 var params = source.getParams();
 params.t = new Date().getMilliseconds();
 source.updateParams(params);

 pmfeatlayer.setVisible(true);
}
Related Question