Interazioni con la mappa

Come abbiamo visto nella precedente lezione la mappa e gli oggetti contenuti in essa emettono molti eventi. Le combinazione di eventi e di gestori (listeners) permettono di gestire tutti i possibili tipi d’interazioni di cui si possa avere bisogno, dai basilari zoom e pan fino alla selezione di elementi vettoriali, l’interrogazione di layer, ecc. È possibile definire sequenze di azioni basate del tutto sul nostro codice applicativo, e spesso è necessario farlo, tuttavia esistono delle interazioni di base comuni a molte azioni. Pensiamo ad esempio allo zoom tramite rettangolo su un’area e alla selezione tramite rettangolo di alcune feature di uno strato vettoriale: entrambe hanno bisogno che l’utente possa disegnare un rettangolo su una mappa. Per questo genere di interazioni OpenLayers mette a disposizione degli strumenti “prefabbricati” e configurabili, che si trovano sotto il namespace ol.interaction.*.

Useremo queste interazioni in tutto il prosieguo del corso, per interrogare o modificare gli elementi di un layer, per cui è opportuno comprenderne il funzionamento che, in generale, è piuttosto semplice. Un’istanza di una ol.interaction rappresenta un’interazione che può essere inserita nella mappa, in modo che possa reagire ai vari eventi della mappa stessa. Un’interazione, in un dato momento, può essere attiva o meno. Questo fa sì che nella mappa siano potenzialmente presenti e attive più interazioni, ognuna in ascolto di uno o più eventi d’interesse (es. click e trascinamento del mouse, rotazione della rotella del mouse, pressione di un pulsante della tastiera, ecc.). Questo si traduce nella registrazione di una serie di listeners sugli eventi della mappa, che al momento dell’emissione di un evento verranno eseguiti in sequenza a seconda dell’ordine di inserimento dell’interazione nella mappa.

Come abbiamo visto nella prima lezione pratica alcune interazioni vengono inserite di default in fase di creazione, a meno che non si chieda esplicitamente di non creare nessuna interazione, ad es. se volessimo generare una mappa statica. Allo stesso modo è possibile rimuovere i controlli inseriti automaticamente (zoom)

var map = new ol.Map({
    interactions: [], // attribuiamo un layer vuoto, così non vengono inserite interazioni
    controls: [] // idem per i controlli
})

Così facendo non sarà più possibile né muoversi né zoomare.

Ottenere l’estensione di un’area

Vediamo adesso come possiamo usare una delle interazioni di base per stampare a schermo le coordinate minime e massime di un’area definita con un rettangolo.

L’interazione che fa al nostro caso è ol.interaction.DragBox. Quando attiva l’utente potrà disegnare un rettangolo sulla mappa, poi starà a noi farne qualcosa.

1. Per prima cosa istanziamo ol.interaction.DragBox (riga 1)
2. Questa interazione emette tre tipi di eventi: boxstart al primo click sulla mappa, boxdrag mentre il mouse viene trascinato, boxend quando viene rilasciato il mouse e l’interazione termina. Noi registriamo il nostro listener al termine dell’interazione (riga 3)
3. La nostra funzione riceve l’evento come parametro (che abbiamo chiamato evt) da cui estraiamo il target, cioè chi è stato a scatenarlo, ovvero la nostra interazione. Usiamo il metodo ol.interaction.DragBox.getGeometry/() per ottenere il poligono del nostro rettangolo. Usando il metodo getExtent() del poligono otteniamo le coordinate minx, miny, maxx, maxy dell’area, che poi andiamo a scrivere nell’elemento HTML (riga 5)
4. Definita l’interazione la poniamo inizialmente in stato disattivato (riga 8) e la inseriamo in mappa (riga 9)
5. Usando il checkbox attiviamo/disattiviamo l’interazione (righe 14-16)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var areaExtentInteraction = new ol.interaction.DragBox();

areaExtentInteraction.on('boxend', function(evt) {
  var extent = evt.target.getGeometry().getExtent();
  $("#extent").html(extent.join(", "));
});

areaExtentInteraction.setActive(false);
map.addInteraction(areaExtentInteraction);

var toggleBBOXbtn = $("#togglebbxobtn");

toggleBBOXbtn.change(function() {
  var activate = $(this).prop("checked");
  $("#extent").html("");
  areaExtentInteraction.setActive(activate);
});

Talvolta è utile combinare l’uso di un pulsante della tastiera per avviare l’interazione. OL, ad esempio, usa lo SHIFT per avviare l’interazione DragBox che fornisce l’azione “zoom to box”. Nel nostro esempio possiamo aggiungere il modificatore “Alt +”, ovvero far sì che l’interazione si abiliti solo se viene mantenuto premuto il tasto Alt. I modificatori vengono impostati tramite la proprietà condition di un’interazione, il cui valore predefinito è ol.events.condition.noModifierKeys, ovvero nessun modificatore richiesto.

1
2
3
var areaExtentInteraction = new ol.interaction.DragBox({
    condition: ol.events.condition.altKeyOnly // attivo il modificatore "Alt+"
});

Alcuni dei modificatori più comunumente usati sono:

• ol.events.condition.altKeyOnly
• ol.events.condition.shiftKeyOnly
• ol.events.condition.altShiftKeysOnly
• ol.events.condition.platformModifierKeyOnly

Altri invece riguardano il modo con cui l’interazione viene eseguita dall’utente. Ad es. ol.events.condition.doubleClick fa sì che una certa interazione si attivi solo se l’utente esegue un doppio click col mouse.

Nelle prossime lezioni vedremo altri esempi di utilizzo delle interazioni per l’interrogazione, la selezione e la modifica degli elementi in mappa.