Question

我正在使用“OpenLayers.Control.SelectFeature”将鼠标悬停在矢量图层中的许多要素上。但是，当我在顶部添加另一个图层时，悬停“突出显示”功能会丢失，因为顶层会阻止它。有没有人知道是否有一些“允许直通”功能。

将顶层放在下面不是一个选项，因为它需要位于顶部。

编辑：如果你加载我的代码，你会看到它工作正常，直到你按下“向上移动”按钮，这将把图层放在另一层的顶部，事情将不再起作用。

这是我的代码：

<!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: 600px;
                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>

Answer 1

以下是一种可能有效的方法：添加vectors1即使单击MoveUp也可以突出显示。然后添加一个处理程序以将样式应用于所需的功能：

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
   });

SelectFeature用于顶层下面的图层中的要素

1 个答案: