Big thanks to Andreas Hocevar for this SLD format class - this continues to extend his Rule and Style work by giving us the ability to read SLD docs - onward with style r=tschaub (closes #533).
git-svn-id: http://svn.openlayers.org/trunk/openlayers@5520 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
116
examples/sld.html
Normal file
116
examples/sld.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 800px;
|
||||
height: 475px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/Firebug/firebug.js"></script>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var lon = 5;
|
||||
var lat = 40;
|
||||
var zoom = 5;
|
||||
var map, layer, gmlLayers, styles, waterStyle, hover;
|
||||
|
||||
function load(){
|
||||
OpenLayers.loadURL("tasmania/sld-tasmania.xml", "", null, init);
|
||||
}
|
||||
|
||||
function init(req){
|
||||
map = new OpenLayers.Map('map');
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
map.zoomToExtent(new OpenLayers.Bounds(143,-39,150,-45));
|
||||
|
||||
sld = new OpenLayers.Format.SLD().read(req.responseText,
|
||||
{withNamedLayer: true});
|
||||
|
||||
styles = sld[1];
|
||||
|
||||
waterStyle = styles["WaterBodies"];
|
||||
|
||||
gmlLayers = [
|
||||
// use the sld UserStyle named "Default Styler"
|
||||
new OpenLayers.Layer.GML("StateBoundaries",
|
||||
"tasmania/TasmaniaStateBoundaries.xml", {
|
||||
style: waterStyle["default"]}),
|
||||
new OpenLayers.Layer.GML("Roads",
|
||||
"tasmania/TasmaniaRoads.xml", {
|
||||
style: waterStyle["default"]}),
|
||||
new OpenLayers.Layer.GML("WaterBodies",
|
||||
"tasmania/TasmaniaWaterBodies.xml", {
|
||||
style: waterStyle["default"]}),
|
||||
new OpenLayers.Layer.GML("Cities",
|
||||
"tasmania/TasmaniaCities.xml", {
|
||||
style: waterStyle["default"]})];
|
||||
|
||||
// add the first layer with the style passed to the constructor
|
||||
map.addLayer(gmlLayers[0]);
|
||||
// add the other layers after setting the style using the
|
||||
// setStyle() method, which will pick the correct default style
|
||||
// from the styles hash we got back from
|
||||
// OpenLayers.Format.SLD.read()
|
||||
for (var i=1; i<gmlLayers.length; i++) {
|
||||
gmlLayers[i].style = styles[gmlLayers[i].name]["default"];
|
||||
map.addLayer(gmlLayers[i]);
|
||||
gmlLayers[i].redraw();
|
||||
}
|
||||
|
||||
// SLD can also be used for the SelectFeature control
|
||||
waterStyle["Hover Styler"].defaultStyle =
|
||||
OpenLayers.Feature.Vector.style["select"];
|
||||
hover = new OpenLayers.Control.SelectFeature(gmlLayers[2], {
|
||||
selectStyle: waterStyle["Hover Styler"],
|
||||
hover: true,
|
||||
select: select
|
||||
});
|
||||
map.addControl(hover);
|
||||
hover.activate();
|
||||
}
|
||||
|
||||
// replaces OpenLayers.Control.Select.select
|
||||
var select = function(feature) {
|
||||
// store layer style
|
||||
var style = feature.layer.style;
|
||||
// set temporary layer style for hover rendering
|
||||
feature.layer.style = hover.selectStyle;
|
||||
OpenLayers.Control.SelectFeature.prototype.select.apply(hover, arguments);
|
||||
// restore layer style
|
||||
feature.layer.style = style;
|
||||
}
|
||||
|
||||
// set a new style when the radio button changes
|
||||
function setStyle(styleName) {
|
||||
// change the style of the features of the WaterBodies layer
|
||||
var features = gmlLayers[2].features;
|
||||
for (var i=0; i<features.length; i++) {
|
||||
features[i].style = waterStyle[styleName];
|
||||
}
|
||||
gmlLayers[2].redraw();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="load()">
|
||||
<div id="map"></div>
|
||||
<p>This example uses a <a target="_blank" href="xml/sld-tasmania.xml">SLD
|
||||
file</a> to style the vector features. The style to be used is either
|
||||
determined by the NamedLayer and IsDefault properties in the sld file, or
|
||||
can directly be applied by addressing a style from the styles
|
||||
hash with the UserStyle name from the sld file as key. Select a new style for the WaterBodies layer below:<p>
|
||||
<form>
|
||||
<input type="radio" name="style" onclick="setStyle(this.value)" checked="checked" value="default">Default Styler (zoom in to see more features)</input><br/>
|
||||
<input type="radio" name="style" onclick="setStyle(this.value)" value="Styler Test PropertyIsEqualTo">Styler Test PropertyIsEqualTo</input><br/>
|
||||
<input type="radio" name="style" onclick="setStyle(this.value)" value="Styler Test Not FeatureId">Styler Test Not FeatureId</input><br/>
|
||||
<input type="radio" name="style" onclick="setStyle(this.value)" value="Styler Test WATER_TYPE">Styler Test WATER_TYPE</input><br/>
|
||||
<input type="radio" name="style" onclick="setStyle(this.value)" value="Styler Test PropertyIsGreaterThanOrEqualTo">Styler Test PropertyIsGreaterThanOrEqualTo</input><br/>
|
||||
<input type="radio" name="style" onclick="setStyle(this.value)" value="Styler Test PropertyIsLessThanOrEqualTo">Styler Test PropertyIsLessThanOrEqualTo</input><br/>
|
||||
<input type="radio" name="style" onclick="setStyle(this.value)" value="Styler Test PropertyIsGreaterThan">Styler Test PropertyIsGreaterThan</input><br/>
|
||||
<input type="radio" name="style" onclick="setStyle(this.value)" value="Styler Test PropertyIsLessThan">Styler Test PropertyIsLessThan</input><br/>
|
||||
<input type="radio" name="style" onclick="setStyle(this.value)" value="Styler Test PropertyIsLike">Styler Test PropertyIsLike</input><br/>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user