OpenLayers：点击后无法选择功能

Question

I'm trying a simple test where I have a base image with draggable features on top. These point features have associated external graphics (I'd prefer to use polygons with associated graphics but that's a whole other question).

I have a hover control that works perfectly. I also have a select control that almost works. However I cannot reselect a feature once I have clicked out once. Similarly, I cannot select features if I click anywhere outside of the features before trying to select one.

I hope that's clear - but if not then this example should be (and you can also see the whole code) http://sigfrid.co.uk/oltest/simple.html

I'll put what I think are the key bits of code below....

Create a map

var map = new OpenLayers.Map({
    div:'map',
});

Add a base layer

    var base = new OpenLayers.Layer.Image(
    'Base level',
    'img/base.png',
    new OpenLayers.Bounds(-1000, -1000, 1000, 1000),
    new OpenLayers.Size(864,864),
    options
);
map.addLayer(base);

Add styles

var markerStyleMap = new OpenLayers.StyleMap 
({
    "default": new OpenLayers.Style(template, {context: context}),
    "hover": new OpenLayers.Style ({graphicOpacity:0.5}),
    "select": new OpenLayers.Style ({graphicOpacity:0.1})});

Add points

pt1 = new OpenLayers.Geometry.Point(0,0);
pt1Feature = new OpenLayers.Feature.Vector(pt1);
...
markerLayer.addFeatures([pt1Feature,pt2Feature,pt3Feature]);

Add unique lookup for the different marker images

var lookup = {
    "f1": {externalGraphic:"img/f1.png"},
    "f2": {externalGraphic:"img/f2.png"},
    "f3": {externalGraphic:"img/f3.png"},
}

markerStyleMap.addUniqueValueRules("default", "type", lookup);
markerLayer.styleMap = markerStyleMap;
markerLayer.features[0].attributes.type = "f1";
    ...

Add controls

var dragControl = new OpenLayers.Control.DragFeature(markerLayer) 
map.addControl(dragControl);
dragControl.activate();

var highlightCtrl = new OpenLayers.Control.SelectFeature(markerLayer, {
    hover: true,
    highlightOnly: true,
    renderIntent: "hover",
});
map.addControl(highlightCtrl);
highlightCtrl.activate();


var selectCtrl = new OpenLayers.Control.SelectFeature(markerLayer, {
    clickout: true,        
    renderIntent: "select",
});
map.addControl(selectCtrl);
selectCtrl.activate();

Thanks for any help,

Nick

Answer 1

Turns out drag and select are not compatible. However, there are some work arounds such as

http://fastr.wordpress.com/2012/04/17/openlayers-selectfeature-where-did-i-clicked-2/

although this does add some event problems...