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>

99
examples/sld.js Normal file
View File

@@ -0,0 +1,99 @@
var map, sld, waterBodies;
var format = new OpenLayers.Format.SLD();
function init() {
map = new OpenLayers.Map('map', {allOverlays: true});
var layers = createLayers();
map.addLayers(layers);
waterBodies = layers[2];
map.addControl(new OpenLayers.Control.SelectFeature(
waterBodies, {hover: true, autoActivate: true}
));
map.addControl(new OpenLayers.Control.LayerSwitcher());
OpenLayers.loadURL("tasmania/sld-tasmania.xml", null, null, complete);
}
// handler for the loadURL function in the init method
function complete(req) {
sld = format.read(req.responseXML || req.responseText);
buildStyleChooser();
setLayerStyles();
map.zoomToExtent(new OpenLayers.Bounds(143,-39,150,-45));
}
function createLayers() {
// the name of each layer matches a NamedLayer name in the SLD document
var layerData = [{
name: "Land",
url: "tasmania/TasmaniaStateBoundaries.xml"
}, {
name: "Roads",
url: "tasmania/TasmaniaRoads.xml"
}, {
name: "WaterBodies",
url: "tasmania/TasmaniaWaterBodies.xml"
}, {
name: "Cities",
url: "tasmania/TasmaniaCities.xml"
}];
var layers = [];
for (var i=0,ii=layerData.length; i<ii; ++i) {
layers.push(new OpenLayers.Layer.Vector(
layerData[i].name, {
protocol: new OpenLayers.Protocol.HTTP({
url: layerData[i].url,
format: new OpenLayers.Format.GML.v2()
}),
strategies: [new OpenLayers.Strategy.Fixed()],
// empty style map, will be populated in setLayerStyles
styleMap: new OpenLayers.StyleMap()
}
));
}
return layers;
}
function setLayerStyles() {
// set the default style for each layer from sld
for (var l in sld.namedLayers) {
var styles = sld.namedLayers[l].userStyles, style;
for (var i=0,ii=styles.length; i<ii; ++i) {
style = styles[i];
if (style.isDefault) {
map.getLayersByName(l)[0].styleMap.styles["default"] = style;
break;
}
}
}
// select style for mouseover on WaterBodies objects
waterBodies.styleMap.styles.select = sld.namedLayers["WaterBodies"].userStyles[1];
}
// add a radio button for each userStyle
function buildStyleChooser() {
var styles = sld.namedLayers["WaterBodies"].userStyles;
var chooser = document.getElementById("style_chooser"), input, li;
for (var i=0,ii=styles.length; i<ii; ++i) {
input = document.createElement("input");
input.type = "radio";
input.name = "style";
input.value = i;
input.checked = i == 0;
input.onclick = function() { setStyle(this.value); };
li = document.createElement("li");
li.appendChild(input);
li.appendChild(document.createTextNode(styles[i].title));
chooser.appendChild(li);
}
}
// set a new style when the radio button changes
function setStyle(index) {
waterBodies.styleMap.styles["default"] = sld.namedLayers["WaterBodies"].userStyles[index];
// apply the new style of the features of the Water Bodies layer
waterBodies.redraw();
}

2
examples/tasmania/sld-tasmania.xml
View File

@@ -10,7 +10,7 @@
<sld:Name>WaterBodies</sld:Name>
<sld:UserStyle>
<sld:Name>Default Styler</sld:Name>
<sld:Title>Default Styler</sld:Title>
<sld:Title>Default Styler (zoom in to see more objects)</sld:Title>
<sld:Abstract></sld:Abstract>
<sld:IsDefault>1</sld:IsDefault>
<sld:FeatureTypeStyle>