Question

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

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

是否有其他方法可以控制此操作而不将两个图层都添加到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>

使用

更改订单时

 map.setLayerZIndex(vectors2, 0);
 map.setLayerZIndex(vectors1, -1);

永远不会有效，因为

var selectCtrl = new OpenLayers.Control.SelectFeature([vectors1],

将功能创建到Z-index 725的RootContainer中。

所以我不知道如何将不同的矢量图层保留在地图中。某些图层具有覆盖和单击功能，而另一些图层没有覆盖或单击处理程序，并且能够正确地对图层进行排序。

谢谢＆amp;问候，拉斐尔。

Answer 1

我认为您的代码基于此example。

如果您创建一个jsFiddle以解释您的问题，这确实很有帮助。

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

请检查我使用突出显示的this jsFiddle，然后点击第一个叠加层上的选择控件。没有必要使用indeces。

我拿出了控制台报告，专注于以下主要部分：

 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-index时使用选择控件。在激活事件期间，激活选择控件将始终将控制层阵列中定义的图层置于顶部。

我建议你使用不同的方法。您可以在地图对象上使用事件侦听器来实现悬停＆amp;无论z-index如何，都选择功能。

我分叉了我之前的jsFiddle来展示如何实现这一目标。请查看this。

Openlayers控制带有和不带SelectFeature的Layer之间的z-index

1 个答案: