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

Question

我的Web应用程序通过Geoserver 2.6.0从Postgis向WWW图层提供了来自Postgis的OpenLayers地图，该地图工作正常且符合预期。 用户可以通过其属性（通过HTML中的下拉框）过滤WMS图层的某些元素，并按预期更新该图层。 我现在想添加一个附加的下拉框，该框根据附加的下拉框的值来更改WMS图层的样式。 额外下拉菜单的样式选项非常简单，“正常”或“突出显示”。 我认为在javascript中使用简单的“ if else”语句将强制以两种样式之一绘制图层。 但是，不幸的是，当用户选择新样式并单击“更新”按钮时，样式没有更新，经过数天的努力，我完全陷入了困境。

图层样式的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的代码。

 <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代码...

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

Answer 1

我设法最终解决了它-事实证明这是我的'if'语句的问题，因为它只是需要简化。 相关（有效）JavaScript如下...

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