Dynamically style a WMS layer with Javascript from

问题:

My web application serves a WMS layer to an OpenLayers map from Postgis via Geoserver 2.6.0, which works fine and as expected. The user can filter certain elements of the WMS layer by its attributes (via drop down boxes in the HTML) and the layer updates as expected. I would like to now add an additional drop down box that alters the style of the WMS layer, depending on the additional drop down box value. The style options for the additional drop down are very simple, either 'normal' or 'highlight'. I thought that using a simple 'if else' statement in the javascript would force the layer to be drawn in one of these two styles. Unfortunately however when the user selects the new style and clicks the update button the style is not updated, and after days of wrestling with this I am completely stuck.

The SLD syntax for the layer styles work fine individually (they validate in the Gesoserver interface) they just do not work together in this way, only the first style remains.

The nearest I found on terms of similar posts are these two, but these don't seem to solve my problem

https://gis.stackexchange.com/questions/64113/how-to-dynamically-change-sld-style-of-wms-layer-being-served-by-geoserver-from

http://osgeo-org.1560.x6.nabble.com/dynamic-SLD-with-openlayers-td3806595.html

Any ideas? Thanks in advance, code is below.

Code for the HTML..

<p>Country filter:</p>
<select id="cql1">
  <option value="country LIKE 'england'">england</option>
  <option value="country LIKE 'wales'">wales</option>
</select>

<p>Road type filter:</p>
<select id="cql2">
  <option value="road LIKE 'a-road'">main road</option>
  <option value="road LIKE 'b-road'">minor road</option>
</select>

<p>Status filter:</p>
<select id="cql3">
  <option value="status LIKE 'in use'">in use</option>
  <option value="status LIKE 'under construction'">under construction</option>
</select>

<p>Line style:</p>
<select id="line_style">
  <option value="normal">Normal</option>
  <option value="highlight">Highlight</option>
</select>

<input type="submit" value="update" onclick="updateFilter(this);">

Javascript code...

var roads;

// function that updates the WMS layer following user selection
function updateFilter() {
  var cql1 = document.getElementById("cql1");
  var cql2 = document.getElementById("cql2");
  var cql3 = document.getElementById("cql3");
  var line_style = document.getElementById("line_style");
  var format = new OpenLayers.Format.CQL();
  if (roads.params.CQL_FILTER) {
    delete roads.params.CQL_FILTER;
  }
  var filter1;
  var filter2;
  var filter3;

  try {
    filter1 = format.read(cql1.value);
    filter2 = format.read(cql2.value);
    filter3 = format.read(cql3.value);

  } catch (err) {
    if ((cql1.value != "") || (cql2.value != "") || (cql3.value != "") || (line_style.value != "")) { //if cannot read one of the values
      alert("One of the filters cannot be processed");
    }
  }
  if ((filter1) || (filter2) || (filter3) & (line_style.value = 'normal')) {
    layer.clearGrid(); // This gets rid of the previous WMS display...
    layer.mergeNewParams({
      'STYLES': "layer_normal",
      'CQL_FILTER': cql1.value + " AND " + cql2.value + " AND " + cql3.value
    })
  } else {
    layer.clearGrid(); // This gets rid of the previous WMS display...
    layer.mergeNewParams({
      'STYLES': "layer_highlight",
      'CQL_FILTER': cql1.value + " AND " + cql2.value + " AND " + cql3.value
    })
  }
    layer.redraw({
    force: true
  });
  return false;
}

// Details of the WMS layer itself
roads = new OpenLayers.Layer.WMS(
  "Filter Selection",
  "http://www.example.com/geoserver/roads/wms", {
    LAYERS: 'data:roads',
    format: 'image/png',
    srs: 'ESPG:3857',
    transparent: true
  }, {
    transitionEffect: null,
    buffer: 1,
    visibility: true,
    isBaseLayer: false
  }
);

回答1:

I managed to solve it in the end - it turned out to be a problem with my 'if' statement, in that it just needed to be simplified. Relevant (working) javascript as follows...

	if (line_style.value == "normal") {
   layer.clearGrid(); // This gets rid of the previous WMS display...
   layer.mergeNewParams({
                      'STYLES': "layer_normal",
                      'CQL_FILTER':cql1.value+" AND "+cql2.value+" AND "+cql3.value+" AND "+cql4.value
                      })
}
else {
   layer.clearGrid(); // This gets rid of the previous WMS display...
   layer.mergeNewParams({
                      'STYLES': "layer_highlight",
                      'CQL_FILTER':cql1.value+" AND "+cql2.value+" AND "+cql3.value+" AND "+cql4.value
                      })
    } 
layer.redraw({force:true});