1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
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.Request.GET({
url: "tasmania/sld-tasmania.xml",
success: complete
});
}
// handler for the OpenLayers.Request.GET 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();
}
|
