SelectFeature for features in layer underneath top layer
I'm using the "OpenLayers.Control.SelectFeature" to hover over many features in a vector layer. However, when i add another layer on top, the hover 'highlight' ability is lost because the top layer is blocking it. Does anyone know if there is some "allow passthrough" feature or something.
Placing the top layer below is not an option as it needs to be on top.
EDIT: If you load up my code you'll see that it works fine until you press the "move up" button which will bring the layer on top of the other layer and things will not work anymore.
HERE is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Open Layers TEST</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"/>
<style type="text/css">
body {
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #222;
background: #fff;
}
html, body
{
margin: 20px;
padding: 20px;
height: 100%;
width: 100%;
}
.smallmap {
width: 600开发者_如何学Cpx;
height: 500px;
border: 1px solid #ccc;
padding: 20px;
}
#controlToggle li {
list-style: none;
}
</style>
</head>
<body onload="init()">
<p><button onclick="MoveLayer('UP')">Move Up</button><button onclick="MoveLayer('DOWN')">Move Down</button></p>
<div id="map" class="smallmap"></div>
<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
var map, selectControl, vectors2, vectors1;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init() {
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{ layers: 'basic' }
);
vectors1 = new OpenLayers.Layer.Vector("B&W(Vector1 - Results)", {
rendererOptions: { zIndexing: true },
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: '#ff3',
strokeOpacity: .9,
strokeWidth: 2,
fillColor: '#33f',
fillOpacity: .2,
graphicZIndex: 10,
cursor: "pointer"
}),
"select": new OpenLayers.Style({
strokeColor: '#33f',
strokeOpacity: .9,
strokeWidth: 2,
fillColor: '#ff3',
fillOpacity: .2,
graphicZIndex: 12,
cursor: "pointer"
})
})
});
vectors2 = new OpenLayers.Layer.Vector("Y&B(Vector2 - Region)", {
rendererOptions: { zIndexing: true },
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: '#000',
strokeOpacity: .5,
strokeWidth: 2,
fillColor: '#fff',
fillOpacity: .9,
graphicZIndex: 10,
cursor: "pointer"
}),
"select": new OpenLayers.Style({
strokeColor: '#fff',
strokeOpacity: .5,
strokeWidth: 2,
fillColor: '#000',
fillOpacity: .2,
graphicZIndex: 12,
cursor: "pointer"
})
})
});
map.addLayers([wmsLayer, vectors1, vectors2]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
selectControl = new OpenLayers.Control.SelectFeature(
[vectors2],
{
hover: true,
highlightOnly: true
});
// selectControl.handlers['feature'].stopDown = false;
// selectControl.handlers['feature'].stopUp = false;
map.addControl(selectControl);
selectControl.activate();
var feature1 = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"
)
);
vectors1.addFeatures([feature1]);
var feature2 = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((-120.828125 -50.3515625, -80.1875 -80.0078125, -40.40625 -20.4140625, -120.828125 -50.3515625))"
)
);
var feature3 = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((-52.734375 43.9453125, 82.265625 -65.7421875, 72.421875 41.8359375, 27.421875 67.1484375, -52.734375 43.9453125))"
)
);
vectors2.addFeatures([feature2, feature3]);
vectors1.events.fallThrough = true;
map.zoomToMaxExtent();
}
function MoveLayer(direction) {
if (direction == "UP") {
map.raiseLayer(vectors1, 1);
} else {
map.raiseLayer(vectors1, -1);
}
map.resetLayersZIndex();
// vectors1.setZIndex(9999);
}
</script>
</body>
</html>
Here is one approach that might work: Adding vectors1 should allow you to highlight even by clicking MoveUp. Then add a handler to apply style to the features you want:
function style_feature(feature) {
var hoverStyle =new OpenLayers.Style({
//add style here
});
//todo: add logic to check feature you want and style accordingly
this.layer.drawFeature(e, hoverStyle);
};
selectControl = new OpenLayers.Control.SelectFeature(
[vectors2,vectors1],
{
hover: true,
highlightOnly: true,
highlight: style_feature
});
加载中,请稍侯......
精彩评论