7f34868fe2
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11158 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
122 lines
5.4 KiB
HTML
122 lines
5.4 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
|
|
<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/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>
|
|
</head>
|
|
<body onload="init()">
|
|
<h1 id="title">Styled Layer Descriptor (SLD) Example</h1>
|
|
<div id="tags">
|
|
vector, feature, sld, styling, style
|
|
</div>
|
|
<p id="shortdesc">
|
|
Parsing SLD and applying styles to a vector layer.
|
|
</p>
|
|
<div id="map" class="smallmap"></div>
|
|
<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>
|
|
<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>
|
|
</body>
|
|
</html>
|