Un flusso continuo di eventi

La mappa, la sua ol.View, e tutti gli oggetti che inseriamo in essa emettono un gran numero di eventi. Al caricamento di un dato, al cambio di una qualsiasi proprietà di un oggetto, al cambio di posizione, zoom, rotazione della mappa, al movimento, click, drag del mouse sulla mappa o semplicemente alla pressione di un tasto della tastiera, e in tante altre occasioni, vengono emessi eventi, che portano con sé un carico di informazioni utili ad essere intercettati, filtrati e gestiti in modo da poter eseguire qualsiasi azione a valle della loro emissione.

Alcuni eventi vengono generati internamente da OpenLayers, ad esempio quando viene inserito un nuovo layer o quando si stanno caricando i dati da una sorgente. Altri invece sono eventi generati dal browser, come il click del mouse sulla mappa, che vengono intercettati da OpenLayers, arricchiti di informazioni e rilanciati in modo da poter essere gestiti a valle dai listener, che sono metodi o funzioni che possiamo registrare su un dato evento e che verranno eseguiti ogni volta che si presenterà quell’evento.

Cominciamo con un esempio di quest’ultimo tipo: usiamo gli eventi generati dal movimento del mouse sulla mappa per ottenere, e mostrare, le coordinate geografiche della posizione istantanea del mouse.

In questo esempio sfruttiamo l’evento “mouse move” del browser, intercettato e rilanciato dalla mappa come “pointermove”. Per registrare il nostro listener su questo evento usiamo un metodo di ol.Map, offerto da tutti gli oggetti che emettono eventi e tipico dei sistemi ad eventi in javascript, che è ol.Map.on(). Con questo metodo chiediamo che nel momento in cui la mappa emette un certo evento, nel nostro caso pointermove, venga eseguita la funzione che passiamo al metodo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
map.on('pointermove', function(event) {
  var coords = event.coordinate;
  
  var gbw_coords = ol.proj.transform(coords,"EPSG:3857", "EPSG:3003");
  var wgs84_coords = ol.proj.transform(coords,"EPSG:3857","EPSG:4326");
  
  gbw_coords_el.text(formatCoords(gbw_coords));
  wgs84_coords_el.text(formatCoords(wgs84_coords,4));
});

function formatCoords(coords,dec) {
  dec = dec || 2;
  return coords[0].toFixed(dec) + ", "+coords[1].toFixed(dec);
};

La nostra funzione riceve come parametro l’evento stesso, che contiene molte proprietà utili (fornite dalla mappa), come ad esempio le coordinate del punto in cui è stato emesso l’evento. L’evento pointermove viene creato ad ogni movimento del mouse sulla mappa per cui, muovendo il mouse, vengono emessi continuamente nuovi eventi e ogni volta viene eseguita la nostra funzione che

1. estrae il valore della coordinata dell’evento (riga 2),
2. trasforma le coordinate da EPSG:3857 (SR della mappa) a Gauss Boaga Ovest e WGS84 (righe 4 e 5)
3. scrive in due elementi della pagina HTML (ottenuti magari con l’aiuto di jQuery) il testo formattato delle coordinate

Se ispezioniamo un evento pointermove vedremo che contiene molte proprietà aggiuntive rispetto all’evento mousemove originale del browser:

coordinate:(2) [1254831.3330970197, 5429709.2022718685]
dragging:false
frameState:{animate: false, attributions: {…}, coordinateToPixelTransform: Array(6), extent: Array(4), focus: Array(2), …}
map:ol.Map {pendingRemovals_: {…}, dispatching_: {…}, listeners_: {…}, revision_: 0, ol_uid: 4, …}
originalEvent:PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
pixel:(2) [852, 303]
pointerEvent:ol.pointer.PointerEvent {type: "pointermove", target: ol.p…r.PointerEventHandler, originalEvent: PointerEvent, buttons: 0, pressure: 0, …}
target:ol.Map {pendingRemovals_: {…}, dispatching_: {…}, listeners_: {…}, revision_: 0, ol_uid: 4, …}
type:"pointermove"
__proto__:ol.MapBrowserEvent

Per poter sapere quali eventi vengono emessi da un oggetto e quali proprietà sono disponibili all’interno di ogni evento possiamo leggere la documentazione delle API di OpenLayers. Per esempio gli eventi dell’oggetto ol.Map sono elencati alla voce “Fires:” della pagina dedicata alla sua API

Per ogni evento viene indicato il tipo di evento. Ad esempio l’evento pointermove è un evento di tipo ol.MapBrowserEvent, per cui quando ci viene passato un evento di questo tipo possiamo sapere com’è fatto e cosa contiene dalla documentazione di ol.MapBrowserEvent.