¿Cómo puedo activar la panorámica utilizando Openlayers y una superposición vectorial con controles?

Question

Estoy creando un mapa utilizando el siguiente código:

map = new OpenLayers.Map({
    div: "map"
});

Luego cargo una capa de polígonos geojson y añado dos controles

var highlightCtrl = new OpenLayers.Control.SelectFeature(geojson_layer, {
    hover: true,
    highlightOnly: true,       
    renderIntent: "temporary",
    eventListeners: {
                beforefeaturehighlighted: unreport,
                featurehighlighted: report,
                featureunhighlighted: unreport
            }
}); 

selectCtrl = new OpenLayers.Control.SelectFeature(geojson_layer,
    {clickout: true , 
     renderIntent: "select",
     onSelect: selected, 
     onUnselect: function(e){console.log('unselected)}
});    

map.addControl(highlightCtrl);
map.addControl(selectCtrl);    

highlightCtrl.activate();
selectCtrl.activate();  

Esta capa cubre todo el div del mapa, y ahora ya no puedo desplazar el mapa. ¿Existe alguna forma de habilitar el desplazamiento cuando tengo una capa con controles que cubren el mapa base?

Answer 1

Andreas Hocevar ha creado un Rama de OpenLayers (actualmente en la cola de peticiones) que resuelve este problema.

En lugar de utilizar el control SelectFeature, la rama permite el empleo de escuchas de eventos que no se interponen en el camino de otras intenciones de eventos, como el desplazamiento del mapa mientras está dentro de una de sus capas vectoriales.

Su código puede parecerse más a lo siguiente:

map = new OpenLayers.Map({
  div: "map",
  eventListeners: {
    featureover: function(e) {
      //behavior for hover events
    },
    featureout: function(e) {
      //behavior for mouse out events
    },                    
    featureclick: function(e) {
      //behavior for click events
    }
  }
});

var layer_style = new OpenLayers.StyleMap( {
  'default': OpenLayers.Util.applyDefaults(
    { fillColor: '#993333' } //normal (un-selected) appearance
  ),
  'select': OpenLayers.Util.applyDefaults(
    { fillColor: '#cc3333' } //hover/click appearance
  )
});

var geojson_layer = new OpenLayers.Layer.Vector(
  "my_vector_layer", 
  {
    isBaseLayer: false, 
    styleMap: layer_style
    //additional settings you are using to create your geojson layer...
  }
);

map.addLayers([geojson_layer]);

También he creado un ejemplo recientemente que demuestra el uso de esta rama/estrategia.

Espero que eso ayude.