Question

我的Web应用程序通过Geoserver 2.6.0向Postgis的OpenLayers地图提供WMS层，该地图正常工作并且符合预期。用户可以通过其属性（通过HTML中的下拉框）过滤WMS图层的某些元素，并按预期更新图层。我想现在添加一个额外的下拉框来改变WMS图层的样式，具体取决于附加的下拉框值。额外下拉列表的样式选项非常简单，“正常”和“正常”＃39;或者＆＃39;突出显示＆＃39;。我认为使用简单的“if else＆＃39; javascript中的语句会强制以这两种样式之一绘制图层。不幸的是，当用户选择新样式并单击更新按钮时，样式不会更新，经过几天的摔跤后，我完全陷入困境。

图层样式的SLD语法可以单独运行（它们在Gesoserver界面中验证）它们只是不能以这种方式一起工作，只剩下第一种样式。

我在类似帖子中找到的最近的是这两个，但这些似乎并不能解决我的问题

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

有什么想法吗？提前致谢，代码如下。

HTML代码..

＆＃13;

<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);">

＆＃13;

Javascript代码......

＆＃13;

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
  }
);

＆＃13;

Answer 1

我最终成功地解决了这个问题 - 结果证明这是我的问题，如果＆＃39;声明，因为它只需要简化。相关（工作）javascript如下...

＆＃13;

	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});

＆＃13;

使用Geoserver中的Javascript动态设置WMS图层的样式

1 个答案: