ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Simplified the sld example

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12173 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-07-19 10:09:58 +00:00
parent e6a40e1334
commit 4caaebf5bc
3 changed files with 106 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
examples/sld.html
View File

@@ -6,92 +6,9 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/Firebug/firebug.js"></script>
<!--script src="../lib/Firebug/firebug.js"></script-->
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, sld, gmlLayers;
var format = new OpenLayers.Format.SLD();
function init() {
map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());
OpenLayers.loadURL("tasmania/sld-tasmania.xml", null, null, complete);
}
function getDefaultStyle(sld, layerName) {
var styles = sld.namedLayers[layerName].userStyles;
var style;
for(var i=0; i<styles.length; ++i) {
style = styles[i];
if(style.isDefault) {
break;
}
}
return style;
}
function complete(req) {
sld = format.read(req.responseXML || req.responseText);
var hoverStyle = sld.namedLayers["WaterBodies"].userStyles[1];
hoverStyle.defaultStyle = OpenLayers.Util.extend(
{}, OpenLayers.Feature.Vector.style["select"]
);
gmlLayers = [
// use the sld UserStyle named "Default Styler"
new OpenLayers.Layer.GML(
"StateBoundaries",
"tasmania/TasmaniaStateBoundaries.xml",
{
styleMap: new OpenLayers.StyleMap(
getDefaultStyle(sld, "Land")
),
isBaseLayer: true
}
),
new OpenLayers.Layer.GML(
"Roads",
"tasmania/TasmaniaRoads.xml",
{styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "Roads"))}
),
new OpenLayers.Layer.GML(
"WaterBodies",
"tasmania/TasmaniaWaterBodies.xml",
{
styleMap: new OpenLayers.StyleMap({
"default": getDefaultStyle(sld, "WaterBodies"),
"select": hoverStyle
})
}
),
new OpenLayers.Layer.GML(
"Cities",
"tasmania/TasmaniaCities.xml",
{styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "Cities"))}
)
];
map.addLayers(gmlLayers);
map.zoomToExtent(new OpenLayers.Bounds(143,-39,150,-45));
var hover = new OpenLayers.Control.SelectFeature(
gmlLayers[2], {hover: true}
);
map.addControl(hover);
hover.activate();
}
// set a new style when the radio button changes
function setStyle(index) {
gmlLayers[2].styleMap.styles["default"] = sld.namedLayers["WaterBodies"].userStyles[index];
// change the style of the features of the WaterBodies layer
gmlLayers[2].redraw();
}
</script>
<script src="sld.js"></script>
</head>
<body onload="init()">
<h1 id="title">Styled Layer Descriptor (SLD) Example</h1>
@@ -105,19 +22,10 @@
<p id="docs">This example uses a <a target="_blank" href="tasmania/sld-tasmania.xml">SLD
file</a> to style the vector features. To construct layers that use styles
from SLD, create a StyleMap for the layer that uses one of the userStyles in the
namedLayers object of the return from format.read().</p>
namedLayers object of the return from format.read(). Look at the <a href="sld.js">sld.js source</a>
to see how this is done.</p>
<p>Select a new style for the WaterBodies layer below:</p>
<form>
<input type="radio" name="style" onclick="setStyle(this.value)" checked="checked" value="0">Default Styler (zoom in to see more features)</input><br>
<input type="radio" name="style" onclick="setStyle(this.value)" value="3">Styler Test PropertyIsEqualTo</input><br>
<input type="radio" name="style" onclick="setStyle(this.value)" value="4">Styler Test WATER_TYPE</input><br>
<input type="radio" name="style" onclick="setStyle(this.value)" value="5">Styler Test PropertyIsGreaterThanOrEqualTo</input><br>
<input type="radio" name="style" onclick="setStyle(this.value)" value="6">Styler Test PropertyIsLessThanOrEqualTo</input><br>
<input type="radio" name="style" onclick="setStyle(this.value)" value="7">Styler Test PropertyIsGreaterThan</input><br>
<input type="radio" name="style" onclick="setStyle(this.value)" value="8">Styler Test PropertyIsLessThan</input><br>
<input type="radio" name="style" onclick="setStyle(this.value)" value="9">Styler Test PropertyIsLike</input><br>
<input type="radio" name="style" onclick="setStyle(this.value)" value="10">Styler Test PropertyIsBetween</input><br>
<input type="radio" name="style" onclick="setStyle(this.value)" value="11">Styler Test FeatureId</input><br>
</form>
<ul id="style_chooser">
</ul>
</body>
</html>