1
<html xmlns="http://www.w3.org/1999/xhtml">
3
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
4
<link rel="stylesheet" href="style.css" type="text/css" />
5
<script src="../lib/Firebug/firebug.js"></script>
6
<script src="../lib/OpenLayers.js"></script>
7
<script type="text/javascript">
9
var map, sld, gmlLayers;
10
var format = new OpenLayers.Format.SLD();
13
map = new OpenLayers.Map('map');
14
map.addControl(new OpenLayers.Control.LayerSwitcher());
16
OpenLayers.loadURL("tasmania/sld-tasmania.xml", null, null, complete);
20
function getDefaultStyle(sld, layerName) {
21
var styles = sld.namedLayers[layerName].userStyles;
23
for(var i=0; i<styles.length; ++i) {
32
function complete(req) {
34
sld = format.read(req.responseXML || req.responseText);
35
var hoverStyle = sld.namedLayers["WaterBodies"].userStyles[1];
36
hoverStyle.defaultStyle = OpenLayers.Util.extend(
37
{}, OpenLayers.Feature.Vector.style["select"]
41
// use the sld UserStyle named "Default Styler"
42
new OpenLayers.Layer.GML(
44
"tasmania/TasmaniaStateBoundaries.xml",
46
styleMap: new OpenLayers.StyleMap(
47
getDefaultStyle(sld, "Land")
52
new OpenLayers.Layer.GML(
54
"tasmania/TasmaniaRoads.xml",
55
{styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "Roads"))}
57
new OpenLayers.Layer.GML(
59
"tasmania/TasmaniaWaterBodies.xml",
61
styleMap: new OpenLayers.StyleMap({
62
"default": getDefaultStyle(sld, "WaterBodies"),
67
new OpenLayers.Layer.GML(
69
"tasmania/TasmaniaCities.xml",
70
{styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "Cities"))}
74
map.addLayers(gmlLayers);
75
map.zoomToExtent(new OpenLayers.Bounds(143,-39,150,-45));
77
var hover = new OpenLayers.Control.SelectFeature(
78
gmlLayers[2], {hover: true}
80
map.addControl(hover);
84
// set a new style when the radio button changes
85
function setStyle(index) {
86
gmlLayers[2].styleMap.styles["default"] = sld.namedLayers["WaterBodies"].userStyles[index];
87
// change the style of the features of the WaterBodies layer
88
gmlLayers[2].redraw();
92
<body onload="init()">
93
<h1 id="title">Styled Layer Descriptor (SLD) Example</h1>
95
Parsing SLD and applying styles to a vector layer.
97
<div id="map" class="smallmap"></div>
98
<p id="docs">This example uses a <a target="_blank" href="tasmania/sld-tasmania.xml">SLD
99
file</a> to style the vector features. To construct layers that use styles
100
from SLD, create a StyleMap for the layer that uses one of the userStyles in the
101
namedLayers object of the return from format.read().</p>
102
<p>Select a new style for the WaterBodies layer below:</p>
104
<input type="radio" name="style" onclick="setStyle(this.value)" checked="checked" value="0">Default Styler (zoom in to see more features)</input><br/>
105
<input type="radio" name="style" onclick="setStyle(this.value)" value="3">Styler Test PropertyIsEqualTo</input><br/>
106
<input type="radio" name="style" onclick="setStyle(this.value)" value="4">Styler Test WATER_TYPE</input><br/>
107
<input type="radio" name="style" onclick="setStyle(this.value)" value="5">Styler Test PropertyIsGreaterThanOrEqualTo</input><br/>
108
<input type="radio" name="style" onclick="setStyle(this.value)" value="6">Styler Test PropertyIsLessThanOrEqualTo</input><br/>
109
<input type="radio" name="style" onclick="setStyle(this.value)" value="7">Styler Test PropertyIsGreaterThan</input><br/>
110
<input type="radio" name="style" onclick="setStyle(this.value)" value="8">Styler Test PropertyIsLessThan</input><br/>
111
<input type="radio" name="style" onclick="setStyle(this.value)" value="9">Styler Test PropertyIsLike</input><br/>
112
<input type="radio" name="style" onclick="setStyle(this.value)" value="10">Styler Test PropertyIsBetween</input><br/>
113
<input type="radio" name="style" onclick="setStyle(this.value)" value="11">Styler Test FeatureId</input><br/>