Agregar control a la capa wfs inhabilita el encuadre y el zoom al hacer doble clic

Question

Puedo hacer zoom y desplazar la capa wfs cuando no tengo control agregado, pero no puedo desplazar el mapa o hacer zoom en la capa con doble clic cuando agrego un control al mapa: el código para el control es:

 var select = new OpenLayers.Control.SelectFeature(district);
    map.addControl(select);
    select.activate();
    district.events.on({
        featureselected: function(event) {
            feature = event.feature;
            feature.popup = new OpenLayers.Popup.Anchored
                    ("dis_pop",
                            feature.geometry.getBounds().getCenterLonLat(),
                            new OpenLayers.Size(285, 250),
                            '<div class="popupcss"><p>' +
                            '<table>' +
                            '<tr>' +
                            '<td>' +
                            'Item' +
                            '</td>' +
                            '<td>' +
                            'Value' +
                            '</td>' 
                            '</tr>' +
                            '</table></div>',
                            null,
                            true
                            );
            map.addPopup(feature.popup);
        },
        featureunselected: function(event) {
            var feature = event.feature;
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
    });
 

El código es un archivo de trabajo, pero no puedo hacer zoom al hacer doble clic. Tampoco puedo desplazar el mapa con el cursor del mouse.

Answer 1

No sé qué sucedió, cualquier persona con mayor conocimiento puede explicarlo, pero para alguien con un problema similar, lo resolví agregando controles:

 // Panel (toolbar)
    var oDragPanCtrl = new OpenLayers.Control.DragPan({
        isDefault: true,
        title: 'Pan map: keep the left mouse button pressed to drag the map'
    });

var oZoomBoxOutCtrl = new OpenLayers.Control.ZoomBox({
    out: true, displayClass: "olControlZoomBoxOut",
    title: 'Zoom out: click in the map or use the left '
            + 'mouse button and drag to create a rectangle'
});

var oZoomBoxInCtrl = new OpenLayers.Control.ZoomBox({
    title: 'Zoom in: click in the map or use the left '
            + 'mouse button and drag to create a rectangle'
});

var oZoomBoxOutCtrl = new OpenLayers.Control.ZoomBox({
    out: true, displayClass: "olControlZoomBoxOut",
    title: 'Zoom out: click in the map or use the left '
            + 'mouse button and drag to create a rectangle'
});

var oPanel = new OpenLayers.Control.Panel({
    defaultControl: oDragPanCtrl
});

oPanel.addControls([    
    oZoomBoxInCtrl,
    oZoomBoxOutCtrl,
    oDragPanCtrl
]);
 

map.addControl (oPanel); // map es Openlayers.Map () object

---

Puede hacer que este control sea hermoso agregando css (no es necesario):

 .olControlPanel div { 
    display:block;
    width:  24px;
    height: 24px;
    float: left; /* remove this if you want a vertical toolbar  */
    margin: 0px 2px 0px 2px;
}


/* ZoomBox - zoom in */
.olControlPanel .olControlZoomBoxItemInactive { 
    background-image: url("/geoserver/www/openlayers/theme/default/img/zoom_in_off.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.olControlPanel .olControlZoomBoxItemActive { 
    background-image: url("/geoserver/www/openlayers/theme/default/img/zoom_in_on.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

/* ZoomBox - zoom out */
.olControlPanel .olControlZoomBoxOutItemInactive {
    background-image: url("/geoserver/www/openlayers/theme/default/img/zoom_out_off.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.olControlPanel .olControlZoomBoxOutItemActive { 
    background-image: url("/geoserver/www/openlayers/theme/default/img/zoom_out_on.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

/* DragPan */
.olControlPanel .olControlDragPanItemInactive { 
    background-image: url("/geoserver/www/openlayers/theme/default/img/pan_off.png");
    background-repeat: no-repeat;
    background-position: 0px 1px;
}
.olControlPanel .olControlDragPanItemActive { 
    background-image: url("/geoserver/www/Openlayers/theme/default/img/pan_on.png");
    background-repeat: no-repeat;
    background-position: 0px 1px;
}
 

Answer 2

La documentación de OpenLayers dice

featureSelected Listeners will receive an object with a feature property referencing the selected feature.

entonces reemplaza

 featureselected: function(event) {
            feature = event.feature;
 

con

 featureselected: function(feature){
 

lo mismo con featureunselected

ACTUALIZACIÓN Prueba esto

 var select = new OpenLayers.Control.SelectFeature(district,{
    onSelect: function(feature) {
            feature.popup = new OpenLayers.Popup.Anchored
                    ("dis_pop",
                            feature.geometry.getBounds().getCenterLonLat(),
                            new OpenLayers.Size(285, 250),
                            '<div class="popupcss"><p>' +
                            '<table>' +
                            '<tr>' +
                            '<td>' +
                            'Item' +
                            '</td>' +
                            '<td>' +
                            'Value' +
                            '</td>' 
                            '</tr>' +
                            '</table></div>',
                            null,
                            true
                            );
            map.addPopup(feature.popup);
    },
    onUnselect: function(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
    });
map.addControl(select)
select.activate()