动态样式从利用Geoserver使用JavaScript WMS层(Dynamically styl

2019-10-21 14:09发布

我的web应用程序提供WMS图层从POSTGIS通过利用Geoserver 2.6.0的地图的OpenLayers,它工作正常,并符合市场预期。 用户可以按预期的过滤由它的属性的WMS层的某些元件(经由下拉在HTML框)和层更新。 我想现在增加一个额外的下拉框,改变WMS图层的样式,这取决于其他下拉框的值。 对于其他下拉式的风格选项是非常简单的,无论是“正常”或“亮点”。 我认为,在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 ..

 <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:

我设法解决它到底 - 这竟然是我“如果”语句的问题,因为它只是需要加以简化。 相关的(工作)的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}); 



文章来源: Dynamically style a WMS layer with Javascript from Geoserver