SelectFeature pour les entités dans le calque sous la couche supérieure

J'utilise "OpenLayers.Control.SelectFeature" pour survoler de nombreuses fonctions dans un calque vectoriel. Cependant, lorsque j'ajoute une autre couche au-dessus, la capacité de surlignage en vol stationnaire est perdue parce que la couche supérieure la bloque. Est-ce que quelqu'un sait s'il y a une fonctionnalité de "permettre le relais" ou quelque chose du genre.SelectFeature pour les entités dans le calque sous la couche supérieure

Placer la couche supérieure ci-dessous n'est pas une option car elle doit être sur le dessus. Si vous chargez mon code, vous verrez que cela fonctionne bien jusqu'à ce que vous appuyiez sur le bouton "Monter" qui amènera le calque au-dessus de l'autre calque et les choses ne marcheront plus.

ICI est mon 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: 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>

Source

2010-12-07 capdragon

est une approche qui pourrait fonctionner ici: Ajout vectors1 devrait vous permettre de mettre en évidence même en cliquant sur MoveUp. Ensuite, ajoutez un gestionnaire pour appliquer le style aux fonctionnalités que vous voulez:

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

Source

2010-12-07 19:20:38

Oui, la seule chose est, je ne veux pas être en mesure de survoler ou de sélectionner sur le Vectors1, juste vecteurs2. Mais je veux des vecteurs1 au-dessus des vecteurs2. Cela fait-il du sens? – capdragon

Oh, c'est logique. Peut-être ajouter un rappel et mettre en évidence seulement si c'est le calque que vous voulez .. peut-être quelque chose comme ça? rappels: { \t 'over': layer_hover, 'out': layer_out \t}); –

J'ai mis à jour mon commentaire. Je n'ai pas ajouté tout le code, mais l'ajout d'un rappel et le style explicite basé sur les fonctionnalités que vous voulez peut fonctionner. –

SelectFeature pour les entités dans le calque sous la couche supérieure

Répondre

Questions connexes