如何通过javascript动态地将SLD样式添加到WMS图层

时间:2013-01-06 21:52:00

标签: javascript openlayers geoserver

使用OPENLAYERS + GEOSERVER + JAVASCRIPT + SERVLET + AJAX

我有一个servlet,可以接收ajax调用并返回所有国家/地区的人口。我想以这样的方式添加SLD:对于人口少于50,000的国家,WMS图层将显示红色,对于人口超过50,000的国家,WMS图层将显示绿色。所以最终我想根据我从ajax调用中获得的结果,在javascript中为WMS Layer设计SLD样式。可以在javascript中应用SLD ..?如果是这样,plz提供示例代码。感谢您的耐心等待。

1 个答案:

答案 0 :(得分:4)

我自己没有尝试过,但这是它的工作原理:

首先在js-code

中定义SLD
var sld = '<?xml version="1.0" encoding="ISO-8859-1"?>';
sld += '<StyledLayerDescriptor version="1.0.0"'; 
sld += '    xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" ';
sld += '    xmlns="http://www.opengis.net/sld" ';
sld += '    xmlns:ogc="http://www.opengis.net/ogc" ';
sld += '    xmlns:xlink="http://www.w3.org/1999/xlink" ';
sld += '    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">';
sld += '  <NamedLayer>';
sld += '    <Name>Attribute-based polygon</Name>';
sld += '    <UserStyle>';
sld += '      <Title>SLD Cook Book: Attribute-based polygon</Title>';
sld += '      <FeatureTypeStyle>';
sld += '        <Rule>';
sld += '          <Name>SmallPop</Name>';
sld += '          <Title>Less Than 200,000</Title>';
sld += '          <ogc:Filter>';
sld += '            <ogc:PropertyIsLessThan>';
sld += '              <ogc:PropertyName>pop</ogc:PropertyName>';
sld += '              <ogc:Literal>200000</ogc:Literal>';
sld += '            </ogc:PropertyIsLessThan>';
sld += '          </ogc:Filter>';
sld += '          <PolygonSymbolizer>';
sld += '            <Fill>';
sld += '              <CssParameter name="fill">#66FF66</CssParameter>';
sld += '            </Fill>';
sld += '          </PolygonSymbolizer>';
sld += '        </Rule>';
sld += '        <Rule>';
sld += '          <Name>MediumPop</Name>';
sld += '          <Title>200,000 to 500,000</Title>';
sld += '          <ogc:Filter>';
sld += '            <ogc:And>';
sld += '              <ogc:PropertyIsGreaterThanOrEqualTo>';
sld += '                <ogc:PropertyName>pop</ogc:PropertyName>';
sld += '                <ogc:Literal>200000</ogc:Literal>';
sld += '              </ogc:PropertyIsGreaterThanOrEqualTo>';
sld += '              <ogc:PropertyIsLessThan>';
sld += '                <ogc:PropertyName>pop</ogc:PropertyName>';
sld += '                <ogc:Literal>500000</ogc:Literal>';
sld += '              </ogc:PropertyIsLessThan>';
sld += '            </ogc:And>';
sld += '          </ogc:Filter>';
sld += '          <PolygonSymbolizer>';
sld += '            <Fill>';
sld += '              <CssParameter name="fill">#33CC33</CssParameter>';
sld += '            </Fill>';
sld += '          </PolygonSymbolizer>';
sld += '        </Rule>';
sld += '        <Rule>';
sld += '          <Name>LargePop</Name>';
sld += '          <Title>Greater Than 500,000</Title>';
sld += '          <ogc:Filter>';
sld += '            <ogc:PropertyIsGreaterThan>';
sld += '              <ogc:PropertyName>pop</ogc:PropertyName>';
sld += '              <ogc:Literal>500000</ogc:Literal>';
sld += '            </ogc:PropertyIsGreaterThan>';
sld += '          </ogc:Filter>';
sld += '          <PolygonSymbolizer>';
sld += '            <Fill>';
sld += '              <CssParameter name="fill">#009900</CssParameter>';
sld += '            </Fill>';
sld += '          </PolygonSymbolizer>';
sld += '        </Rule>';
sld += '      </FeatureTypeStyle>';
sld += '    </UserStyle>';
sld += '  </NamedLayer>';
sld += '</StyledLayerDescriptor>';

这是从the Geoserver SLD cookbook开始的,这是一个非常好的网站。不要忘记根据您的数据(图层名称,数据属性等)更改SLD。在食谱中,您还可以看到数据应该是什么样子。

如果定义了SLD,您只需使用它创建一个新的WMS图层:

newWmsLayer = new OpenLayers.Layer.WMS.Post(layerName, wmsUrl,
    {
        layers: layerName,
        sld_body: sld
    });

最后将其添加到地图中:

map.addLayer(newWmsLayer);

当然,如果这应该更新现有图层,则应首先删除旧图层。