Selezionare gli elementi di un layer vettoriale

Per selezionare gli elementi di un layer vettoriale rappresentato su una mappa, OL3 prevede la classe ol.interaction.Select; le sue diverse opzioni servono per caratterizzare in che modo deve avvenire la selezione e le principali sono le seguenti:

  • condition – indica qual’è l’evento  per cui deve avvenire la selezione di un elemento (feature): click semplice del mouse, click doppio, passaggio del mouse sopra, … etc; le possibili condizioni corrispondono con i metodi della classe ol.events.condition, ognuno dei quali restituisce un booleano (vero, falso) a secondo che la data condizione sia verificata. I più usati sono:
    • singleClick: semplice click del mouse (quello di default);
    • doubleClick: doppio click del mouse;
    • pointerMove: movimento/passaggio del mouse.
  • toggleCondition – indica qual’è l’evento per cui avviene la selezione multipla di più elementi di un vettore; le possibili condizioni sono ancora espresse  dai metodi della classe ol.events.condition e la condizione di default è  ol.events.condition.shiftKeyOnly (cioè la pressione del tasto Shift).
  • layers – un elenco con i nomi dei layers vettoriali della mappa i cui elementi possono essere selezionati; quando questa opzione non viene specificata, tutti i layers visibili sulla mappa sono selezionabili.
  • style – definisce la stilizzazione che assumono gli elementi selezionati;
  • multi – indica se, quando sono presenti più layer sovrapposti, la selezione in un punto vale per tutti gli elementi sovrapposti in quel punto (true) oppure solo per uno (false); il valore di default è false;
  • hitTolerance – indica il raggio (in pixel) dell’area di tolleranza intorno al puntatore che individua un elemento.

Allora per attivare la selezione degli elementi vettoriali, basta fare due operazioni:

  1. definire l’interazione di selezione, cioè istanziare un oggetto della classe ol.interaction.Select;
  2. aggiungere l’interazione di selezione alla mappa;

in termini di codice, ecco un esempio in cui per le opzioni condition e toggleCondition non specifichiamo nulla, cioè lasciamo le impostazioni di default:

Per deselezionare gli elementi, basta cliccare sulla mappa “a vuoto”, cioè dove non c’è nessun elemento del layer vettoriale.

Il tipo di selezione nel precedente esempio, avviene con un singolo click del mouse (è l’opzione di default). Se invece facciamo un doppio click non si effettua la selezione ma un passo di ingrandimento (zoom+), cioè l’interazione di default associata a questo evento (a meno che non sia stata disabilitata). A proposito, in questa pagina trovate tutte le interazioni che di default sono attive su una mappa di OL3.

Possiamo cambiare l’evento di selezione, semplicemente impostando l’opzione condition dell’oggetto ol.interaction.Select, per esempio:

  • condition: ol.events.condition.doubleClick  per impostare il doppio click;
  • condition: ol.events.condition.pointerMove per impostare il semplice passaggio sopra del cursore.

Naturalmente selezionare degli elementi in genere non ha solo uno scopo visivo (vederli graficamente evidenziati sulla mappa), ma serve per poi fare altre operazioni con essi; per esempio, uno caso semplice è visualizzare delle “informazioni” (dati prelevati dalla tabella degli attributi del vettore) che riguardano l’elemento selezionato.

Per individuare programmaticamente l’elemento selezionato (o gli elementi selezionati se più d’uno) si usa il metodo getFeatures() che restituisce un oggetto di tipo ol.Collection,  sul quale possiamo applicare i metodi previsti per esso: clear, extend, forEach, item, … etc.

Qui vediamo un semplice esempio, in cui usiamo il metodo on() che serve per intercettare un evento e di conseguenza fare seguire un’azione. I tipi di evento previsti per la classe ol.Collection sono due: add, remove (ol.CollectionEvent); noi li usiamo entrambi  così:

  • in corrispondenza di un evento “add” (selezione di un altro elemento), visualizziamo sulla pagina, accanto alla mappa, un’info che riguarda l’elemento selezionato,
  • in corrispondenza di un evento “remove” (deselezione degli elementi), cancelliamo l’informazione precedentemente visualizzata.

questo è il codice:

e questo è l’esempio completo funzionante.

Il layer vettoriale (poligoni) usato nell’esempio rappresenta le aree comunali di una zona dell’Umbria, quindi come informazione da visualizzare per gli elementi selezionati, abbiamo scelto il nome del COMUNE.
L’output sulla pagina web, viene indirizzato sull’elemento <span id=”info_selez”> … </span>,  utilizzando le funzioni jQuery: .html() e .append()  per scrivere ed per .empty() cancellare. Naturalmente si tratta di una soluzione grezza, solo per fare un esempio, perchè ovviamente la visualizzazione può essere realizzata in modo più efficace.

 

condividi: