2015-07-09 40 views
6

Sto usando OpenLayers v3.6 (questo è importante, perché la maggior parte delle soluzioni che ho trovato e che funzionerebbero potentemente sono per OpenLayers 2).Openlayers 3: come selezionare una funzione a livello di programmazione usando ol.interaction.Select?

Ho una tabella e quando seleziono una riga in quella tabella, vorrei evidenziare/selezionare una funzione corrispondente sulla mappa OpenLayers. Tutte le funzioni sono poligoni semplici ( ol.geom.Polygon) nello stesso livello vettoriale ( ol.layer.Vector).

ho istituito selezionare interazione in questo modo:

// there is a lot of other code here 
... 
addSelectListener: function() { 
    this.SelectInteraction = new ol.interaction.Select({ 
     condition: ol.events.condition.singleClick, 
     layers: function (layer) { 
      // defines layer from which features are selectable 
      return layer.get('id') == 'polygons_layer'; 
     }, 
     style: this.Style.Selected 
    }); 

    // Map = ol.Map 
    Map.addInteraction(this.SelectInteraction); 
    this.SelectInteraction.on('select', this.selectPolygon, this); 
} 

... 

selectPolygon: function(event) { 
    var selectSrc = this.getSelectInfo(event); 

    // some code that relies on selectSrc data 
} 

... 

getSelectInfo: function (event) { 
    var selectSrc = { 
     deselected: null, 
     selected: null, 
     type: null     
    }; 

    if (event.selected.length == 0 && event.deselected.length == 1) { 
     // click outside of polygon with previously selected 
     selectSrc.type = 'deselect'; 
     selectSrc.deselected = { 
      feature: event.deselected[0], 
      id: event.deselected[0].getId() 
     }; 

    } else if (event.deselected.length == 0 && event.selected.length == 1) { 
     // click on polygon without previously selected 
     selectSrc.type = 'select'; 
     selectSrc.selected = { 
      feature: event.selected[0], 
      id: event.selected[0].getId() 
     } 

    } else if (event.deselected.length == 0 && event.selected.length == 1) { 
     // click on polygon with previously selected 
     selectSrc.type = 'switch'; 
     selectSrc.deselected = { 
      feature: event.deselected[0], 
      id: event.deselected[0].getId() 
     }; 
     selectSrc.selected = { 
      feature: event.selected[0], 
      id: event.selected[0].getId() 
     } 
    } else { 
     selectSrc.type = 'out'; 
    } 

    return selectSrc; 
} 

Questo funziona bene quando si desidera selezionare poligono cliccando su di esso sulla mappa. Ma quello che voglio è ottenere lo stesso, non facendo clic sulla mappa, ma piuttosto su un elemento esterno alla mappa (riga della tabella nel mio esempio, ma potrebbe essere qualsiasi cosa).

Vorrei utilizzare l'interazione di selezione a causa dell'evento emesso ea causa dello stile applicato alle funzioni selezionate. Tuttavia, se per caso posso semplicemente manipolare le funzionalità selezionate nell'interazione selezionata senza avere lo stesso evento, sarebbe ok.

Sono consapevole di questo problema & risposta - Openlayers 3: Select a feature programmatically - ma il problema è che non riesco a chiedere nei commenti di chiarimenti (ad esempio, che cosa è esattamente mySelectControl), perché non ho alcuna reputazione :)

risposta

7

Il modo per fare è nella domanda linked. Quindi, spingere un ol.Feature nella raccolta selezionata:

var select = new ol.interaction.Select({ 
    //some options 
}); 
map.addInteraction(select); 

var selected_collection = select.getFeatures(); 
selected_collection.push(featurePoint); 

Se si desidera attivare l'evento select:

select.dispatchEvent('select'); 

// OR 

select.dispatchEvent({ 
    type: 'select', 
    selected: [featurePoly], 
    deselected: [] 
}); 

See demo!

+0

Grazie. Ho provato qualcosa di simile ma la cosa era che non si applicava lo stile corretto (e giustamente) e non me ne sono accorto. – DekiChan

+0

Ciò non attiva l'evento "select" sull'interazione. Qualche idea su come forzarla a innescare? Apparentemente 'dispatchEvent' sta diventando una funzione privata da 3.8 in poi –

+1

@PhirozeNoble [vedi fiddle] (https://jsfiddle.net/jonataswalker/boz140fz/). –