使用Geoserver中的Javascript动态设置WMS图层的样式 [英] Dynamically style a WMS layer with Javascript from Geoserver

问题描述

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

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.

图层样式的SLD语法可以单独正常工作(它们在Gesoserver界面中进行验证)，它们不能以这种方式一起工作，仅保留第一种样式.

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-dynamic-change-sld-style-of-wms-layer-being-by-geoserver-from

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

有什么想法吗? 预先感谢，代码在下面.

Any ideas? Thanks in advance, code is below.

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

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

推荐答案

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

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

这篇关于使用Geoserver中的Javascript动态设置WMS图层的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！