Come creare dei buffer

Le aree di buffer o semplicemente i buffer sono tra le funzioni geospaziali più note ed usate nei GIS e non hanno bisogno di presentazioni. Vediamo come si possono realizzare con OpenLayers.

Innanzitutto preciso che ci interessa vedere una soluzione lato client, cioè che elabora i buffer direttamente nel browser dell’utente. Infatti l’altra possibilità sono le soluzioni lato server, come per esempio usando una apposita funzione (ST_buffer) in un DB PostGIS ; in questo scaso infatti i buffer vengono realizzati già a monte (appunto nel server) e poi trasmessi al client come nuovo layer.

Abbiamo diverse possibilità, ma certamente una delle più semplici consiste nel realizzare i buffer usando la libreria JSTS; è una libreria JavaScript opensource (bjornharrtell.github.io/jsts) conforme  alle Simple Features Specification for SQL  dell’ OGC, che consente diverse operazioni spaziali su degli elementi vettoriali: intersezioni, unioni, differenze, … etc.

Per poterla usare insieme con OpenLayers,  prevede la classe OL3Parser che permette sia la lettura che la scrittura di elementi vettoriali in modo conforme alle specifiche di OL3. In pratica il meccanismo generale è questo:

  • si leggono delle geometrie  OL3 convertendole in formato JSTS (jsts.geom.Geometry)
  • si fanno tutte le operazioni spaziali che servono in JSTS, nel nostro caso i buffer
  • si trasformano i risultati in geometrie conformi OL3

Il metodo della classe Geometry che ci serve per realizzare dei buffer è il seguente:

buffer(distance, quadrantSegments, endCapStyle)

i parametri sono tutti valori numerici interi e hanno questo utilizzo:

  • distance – la larghezza del buffer in metri;
  • quadrantSegments – il numero di segmenti usato per disegnare un quadrante di un cerchio (valore di default: 8);
  • endCapStyle – la forma con cui vengono terminati (ai vertici di un elemento) i buffer:
    • 1: semicerchio (CAP_ROUND) ed è il valore di default;
    • 2: linea perpendicolare (CAP_FLAT);
    • 3: semi-quadrato (CAP_SQUARE);

terminazioni buffer

l’unico parametro strettamente necessario è distance, gli altri possono essere omessi (valgono i valori di default).

Vediamo allora, dato un layer vettoriale di partenza, quali sono i semplici passi da fare per creare dei buffer attorno alle sue features; supponiamo, per fare un esempio, che questo sia un insieme di strade (quindi di linee) e che sia in formato geoJSON. Banalmente innanzitutto bisogna caricare la libreria di JSTS e possiamo farlo da un server CDN che la distribuisce:

Adesso dobbiamo leggere uno per uno gli elementi del vettore ‘strade’  tradurli in formato JSTS, quindi per ognuno disegnare il relativo buffer e poi salvare questo in un nuovo layer (quello dei buffer) da riportare in OL; per farlo eseguiamo un ciclo for:

In questo modo abbiamo registrato in vectorSource1 (che è un oggetto OL) gli elementi buffer disegnati, grazie al metodo jstsGeom.buffer, attorno agli elementi del vettore ‘strade’ di partenza  e il layer vettoriale complessivo dei buffer è questo:

Per vedere l’esempio completo cliccate qui:

webmap esempio

Nell’esempio appena visto, abbiamo usato il metodo buffer con specificata solo l’ampiezza (40 metri) e gli altri parametri di default: terminazioni  a semicerchio e 8 segmenti per quadrante. 
Per capire cosa cambia nel disegno dei buffer variando il parametro quadrantSegments, nell’esempio precedente sostituite al posto di jstsGeom.buffer(40) ->  jstsGeom.buffer(40, n, 0); poi cambiate il valore n=1, 2, 3, 4, … etc e vedete i risultati.

Per cambiare il tipo di terminazione , dobbiamo variare l’ultimo parametro, cioè endCapStyle:

  • jstsGeom.buffer(40, n, 2)  se vogliamo una terminazione piatta perpendicolare alla linea
  • jstsGeom.buffer(40, n, 3)  se vogliamo una terminazione a semi-quadrato

In questo altro esempio abbiamo creato dei layer-buffer con i differenti tre di tipi di endCapStyle per poter confrontare le differenze:

webmap esempio

tipi terminazione buffer

 

condividi: