有关悬停和多项功能选择的信息

Question

我从OpenLayer 3.1.1开始，从这个例子开始：http://openlayers.org/en/v3.1.1/examples/vector-layer.html?q=hover 我想显示有关鼠标悬停的信息，并在点击时选择多个功能。要将第二个特征添加到选择中，它将被选中两次。为什么呢？

  var selectClick = new ol.interaction.Select({
  condition: ol.events.condition.click, 
  addCondition: ol.events.condition.shiftKeyOnly ,
  toggleCondition: ol.events.condition.never,
  removeCondition: ol.events.condition.altKeyOnly,
  });   

  select = selectClick;
  map.addInteraction(select);

var highlightStyleCache = {};
var featureOverlay = new ol.FeatureOverlay({
map: map,
style: function(feature, resolution) {
var text = resolution < 5000 ? feature.get('DIVISION') : '';
if (!highlightStyleCache[text]) {
  highlightStyleCache[text] = [new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#f00',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,0,0,0.1)'
    }),
    text: new ol.style.Text({
      font: '12px Calibri,sans-serif',
      text: text,
      fill: new ol.style.Fill({
        color: '#000'
      }),
      stroke: new ol.style.Stroke({
        color: '#f00',
        width: 1
      })
    })
  })];
}
return highlightStyleCache[text];
}
});

var highlight;
var showCheckbox = document.getElementById('infoShow'); 

var displayFeatureInfo = function(pixel) {
    var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    return feature;         
    });

    if (showCheckbox.checked) { 
        if (feature) {
            if (feature.getKeys()=='geometry,COORDINATOR COUNTRY') {
            infoBox.innerHTML = '<strong>Coordinator Country: </strong>' + feature.get('COORDINATOR COUNTRY')+ '<br>'+ '<br>';  
            } 
            else {
                infoBox.innerHTML = '<strong>Area: </strong>' + feature.get('AREA') + '<br>'+'<strong>Marine division: </strong>' + feature.get('DIVISION');
            }   
            } else {
            infoBox.innerHTML = '&nbsp;'+'<br>'+ '<br>';
        }  
    if (feature !== highlight) {            
        if (highlight) {
        featureOverlay.removeFeature(highlight);                
        }
        if (feature) {
        featureOverlay.addFeature(feature);             
        }
        highlight = feature;                
        } 
    }       
    };

    $(map.getViewport()).on('mousemove', function(evt) {
    var pixel = map.getEventPixel(evt.originalEvent);   
    displayFeatureInfo(pixel);
    });