Openlayers在具有和不具有SelectFeature的图层之间控制z索引 [英] Openlayers control z-index between Layer with and without SelectFeature
问题描述
我有两个OpenLayers.Layer.Vector，一个带有OpenLayers.Control.SelectFeature，另一个没有SelectFeature.
I have two OpenLayers.Layer.Vector, one with OpenLayers.Control.SelectFeature and the other without SelectFeature.
当我尝试更改z-index时，由于SelectFeature创建的RootContainer始终位于顶部，因此无法正确显示图层.我也将层的顺序更改为堆栈，但这没有用.
When I try to change the z-index the layers aren't shown properly because the RootContainer created by SelectFeature is always on top. I also changed the order of the layers into the stack but this didn't work.
还有另一种方法来控制此操作，而无需将两个图层都添加到SelectFeature控件中吗?
Is there another way to control this without adding both layers into the SelectFeature control?
这是一个模拟:
<!DOCTYPE html>
<html>
<head>
<style>
.smallmap {
width: 512px;
height: 256px;
border: 1px solid #ccc;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, controls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic',
isBaseLayer: true,}
);
map.addLayers([ol_wms]);
var vectors1 = new OpenLayers.Layer.Vector("vector1");
map.addLayers([vectors1]);
var feature = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"
),
{},
{
fillColor:"#00f"
}
);
vectors1.addFeatures([feature]);
var vectors2 = new OpenLayers.Layer.Vector("vector2");
map.addLayers([vectors2]);
var feature2 = new OpenLayers.Feature.Vector(
OpenLayers.Geometry.fromWKT(
"POLYGON((-120.828125 -50.3515625, -80.1875 -80.0078125, 50.40625 0.4140625, -120.828125 -50.3515625))"
),
{},
{
fillColor:"#0f0"
}
);
vectors2.addFeatures([feature2]);
var report = function(e) {
OpenLayers.Console.log(e.type, e.feature.id);
};
var highlightCtrl = new OpenLayers.Control.SelectFeature([vectors1], {
hover: true,
highlightOnly: true,
renderIntent: "temporary",
eventListeners: {
beforefeaturehighlighted: report,
featurehighlighted: function(e) {console.log("highlight")},
featureunhighlighted: function(e) {console.log("unhighlight")}
}
});
var selectCtrl = new OpenLayers.Control.SelectFeature([vectors1],
{clickout: true,
onSelect: function(e) {
console.log(" select ");
},
onUnselect: function(e) {console.log(" unselect ")}
}
);
map.addControl(highlightCtrl);
map.addControl(selectCtrl);
highlightCtrl.activate();
selectCtrl.activate();
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
map.setLayerZIndex(vectors2, 0);
map.setLayerZIndex(vectors1, -1);
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</body>
</html>
当您使用更改订单时
map.setLayerZIndex(vectors2, 0);
map.setLayerZIndex(vectors1, -1);
因为
var selectCtrl = new OpenLayers.Control.SelectFeature([vectors1],
将功能部件创建到Z索引725的RootContainer中.
do that the Features will be created into RootContainer at Z-index 725.
所以我不知道如何在地图中保留不同的矢量层.某些具有over和click功能的图层，而另一些没有over或click处理程序的图层，则可以正确订购这些图层.
So I don't know how to keep into the map different vector layers. Some layers with over and click functionality and another without over or click handlers and be able to order properly the layers.
感谢&问候，拉斐尔.
Thanks & regards, Rafael.
推荐答案
我假设您的代码基于如果您创建一个jsFiddle来解释您的问题，那确实有帮助.
It really helps if you create a jsFiddle in order to explain your problem.
我为您创建了一个jsFiddle，您可以根据需要复制更新.
I created a jsFiddle for you which you can copy an update if needed.
请检查此 jsFiddle，在其中使用突出显示并在第一个叠加层上单击选择控件.不必使用indeces.
Please check this jsFiddle in which I use the highlight and click select control on the first overlay. It's not necessary to use indeces.
我取出了控制台报告，以便关注以下主要部分:
I took out the console report in order to focus on the main parts which are as follows:
var wkt = new OpenLayers.Format.WKT();
var vectors1 = new OpenLayers.Layer.Vector();
map.addLayers([vectors1]);
var vector1 = wkt.read("POLYGON((0 0, 0 50, 50 50, 50 0, 0 0)");
vector1.geometry.transform(map.displayProjection, map.getProjectionObject());
vectors1.addFeatures([vector1]);
var vectors2 = new OpenLayers.Layer.Vector();
map.addLayers([vectors2]);
var vector2 = wkt.read("POLYGON((10 10, 10 60, 60 60, 60 10, 10 10)");
vector2.geometry.transform(map.displayProjection, map.getProjectionObject());
vectors2.addFeatures([vector2]);
var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors1, {
hover: true,
highlightOnly: true,
renderIntent: "temporary" });
var selectCtrl = new OpenLayers.Control.SelectFeature(vectors1, {
clickout: true });
map.addControl(highlightCtrl);
map.addControl(selectCtrl);
highlightCtrl.activate();
selectCtrl.activate();
希望对您有帮助.
我现在了解您的问题.您不能在覆盖层上设置z索引的情况下使用选择控件.选择控件的激活将始终在激活事件期间将控件图层阵列中定义的图层放在顶部.
I understand your problem now. You cannot use the select control with a z-index set on the overlay. The activation of the select control will always put the layers as defined in the control layer array on top during the activation event.
我建议您使用其他方法.您可以在地图对象上使用事件侦听器来实现悬停&选择功能而不考虑z-index.
I suggest you use a different approach. You can use event listeners on the map object to achieve a hover & select functionality regardless of the z-index.
我分叉了较早的jsFiddle，以展示如何实现这一目标.请查看此.
I forked my earlier jsFiddle to show how this can be achieved. Please have a look at this.
这篇关于Openlayers在具有和不具有SelectFeature的图层之间控制z索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
