2a521ffcb2
git-svn-id: http://svn.openlayers.org/trunk/openlayers@7879 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
144 lines
5.3 KiB
HTML
144 lines
5.3 KiB
HTML
<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>
|