Fatal编程技术网
  • openlayers/
  • Openlayers控制有和没有SelectFeature的层之间的z索引

Openlayers控制有和没有SelectFeature的层之间的z索引

openlayers

Openlayers控制有和没有SelectFeature的层之间的z索引,openlayers,Openlayers,我有两个OpenLayers.Layer.Vector，一个带有OpenLayers.Control.SelectFeature，另一个没有SelectFeature 当我尝试更改z索引时，层没有正确显示，因为由SelectFeature创建的RootContainer始终位于顶部。我还将图层的顺序更改为堆栈，但这不起作用 是否有另一种方法可以在不向SelectFeature控件中添加两个层的情况下控制此操作 下面是一个模拟： <!DOCTYPE html> <html

我有两个
OpenLayers.Layer.Vector
，一个带有
OpenLayers.Control.SelectFeature
，另一个没有
SelectFeature

当我尝试更改z索引时，层没有正确显示，因为由
SelectFeature
创建的
RootContainer
始终位于顶部。我还将图层的顺序更改为堆栈，但这不起作用

是否有另一种方法可以在不向
SelectFeature
控件中添加两个层的情况下控制此操作

下面是一个模拟：

    <!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>
从来没用过，因为

var selectCtrl = new OpenLayers.Control.SelectFeature([vectors1],
请确保这些功能将被创建到Z-index 725处的RootContainer中

所以我不知道如何在地图中保留不同的向量层。有些图层具有“点击”功能，而另一些图层没有“点击”处理程序，因此可以正确地对图层进行排序

谢谢和问候，Rafael。

我想您的代码是基于此的

如果您创建一个JSFIDLE来解释您的问题，那么它确实很有帮助

我为您创建了一个JSFIDLE，您可以根据需要复制更新

请检查我使用突出显示的JSFIDLE，并单击第一个覆盖上的select control。没有必要使用索引

我拿出控制台报告，重点关注以下主要部分：

 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索引集一起使用。在激活事件期间，选择控件的激活将始终将控件层数组中定义的层置于顶部

我建议你使用不同的方法。您可以在map对象上使用事件侦听器来实现悬停和选择功能，而不考虑z索引

我用前面的jsFiddle演示了如何实现这一点。请查看。

您确定SelectFeature创建了根容器吗？您是否有可能在JSFIDLE或类似的东西中重现这个问题，以便我们可以尝试调试它。感谢您提供关于JSFIDLE的建议，我以前从未使用过。它非常有用。尽管如此，当一个层需要SelectFeature但其他层不需要它时，我仍然不知道如何控制层间的z索引。请检查我的编辑和分叉JSFIDLE。非常感谢丹尼斯，你的方法是一个很好的解决方案。现在，我可以毫无问题地更改z索引，我只需要处理之前添加到地图的全局层阵列的层选择，这并不困难。 
 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();