52fb422c49
git-svn-id: http://svn.openlayers.org/trunk/openlayers@5530 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
117 lines
5.7 KiB
HTML
117 lines
5.7 KiB
HTML
<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="tasmania/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>
|