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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vector Layer ZIndex Test</title>
<style type="text/css">
body {
font-size: 0.8em;
}
p {
padding-top: 1em;
}
#map {
margin: 1em;
width: 512px;
height: 512px;
}
</style>
<script src="../../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layerA, layerB, layerV, selectControl1, selectControl2;
function init() {
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
layerV = new OpenLayers.Layer.Vector('v');
var feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([
new OpenLayers.Geometry.LinearRing([
new OpenLayers.Geometry.Point(-110, 60),
new OpenLayers.Geometry.Point(-110, 30),
new OpenLayers.Geometry.Point(-80, 30),
new OpenLayers.Geometry.Point(-110, 60)
])
])
);
layerV.addFeatures([feature]);
selectControl1 = new OpenLayers.Control.SelectFeature(layerV);
selectControl2 = new OpenLayers.Control.SelectFeature(layerV, {
hover: true,
selectStyle: OpenLayers.Util.applyDefaults({fillColor: "red"}, OpenLayers.Feature.Vector.style["select"]),
onSelect: function(feature) {
selectControl2.unselect(feature);
layerV.drawFeature(feature, selectControl2.selectStyle);
}
});
selectControl2.events.register("beforefeatureselected", null, function(feature) {
layerV.drawFeature(feature, selectControl2.selectStyle);
return false;
})
layerA = new OpenLayers.Layer('a', {'isBaseLayer': false});
layerB = new OpenLayers.Layer.WMS(
'b', 'http://www2.dmsolutions.ca/cgi-bin/mswms_gmap', {
'layers': [
'bathymetry', 'land_fn', 'park', 'drain_fn', 'drainage',
'prov_bound', 'fedlimit', 'rail', 'road', 'popplace'
],
'transparent': 'true',
'format': 'image/png'
}, {
'reproject': false
});
map.addLayers([wmsLayer, layerV, layerA, layerB]);
map.addControl(selectControl2);
map.addControl(selectControl1);
map.addControl(new OpenLayers.Control.MousePosition());
selectControl2.activate();
selectControl1.activate();
map.setCenter(new OpenLayers.LonLat(-90, 20), 2);
}
function removeLayerA() {
if (OpenLayers.Util.indexOf(map.layers, layerA) > -1) {
map.removeLayer(layerA);
}
}
function toggleSelectControl1() {
if (selectControl1.active) {
selectControl1.deactivate();
alert("SelectFeature control for clicks deactivated.");
} else {
selectControl1.activate();
alert("SelectFeature control for clicks activated.");
}
}
function toggleSelectControl2() {
if (selectControl2.active) {
selectControl2.deactivate();
alert("SelectFeature control for hover deactivated.");
} else {
selectControl2.activate();
alert("SelectFeature control for hover activated.");
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">Vector Layer ZIndex Test</h1>
<div id="map"></div>
<p>
The map includes one base layer (vmap0) and three overlays, namely a vector
layer, a fake layer with no images, and a dmsolutions layer. The overlays are
added to the map in this order: the vector layer, the fake layer, and the
dmsolutions layer. The map also includes a select feature control, which
when activated bumped the vector layer z-index to some high value. This
makes feature selection work, even though other overlays were added after
the vector layer.
</p>
<p>
If the fake layer is removed from the map (first link below), the vector layer's
z-index must not be reset, so the vector layer must not go under the
dmsolutions layer and feature selection must continue to function as
expected.
</p>
<p>
If one of the SelectFeature controls is deactivated or activated (second
and third link below), the vector layer should change it's position in the
layer stack: on top if at least one of the controls is activated, covered
by other layers if both are deactivated.
</p>
<p>
<a href="javascript:removeLayerA()">Remove the fake layer</a>
<br/><a href="javascript:toggleSelectControl1()">Toggle the click SelectFeature control's active status</a>
<br/><a href="javascript:toggleSelectControl2()">Toggle the hover SelectFeature control's active status</a>
</p>
</body>
</html>
|
