Limitare l’area di spostamento di una mappa

Lo spostamento (drag-panning) di una mappa col mouse, di default non è limitata; a prescindere da dove fissiamo il centro mappa iniziale, possiamo trascinarla e spostarla dove vogliamo.

Se si vuole limitare questo spostamento entro una data area geografica (per es. solo l’Italia o solo la regione Toscana) o fissare come si dice in gergo un bounding-box, in OpenLayers 2 si usava la proprietà restrictedExtent dell’oggetto map (un’applicazione pratica si può vedere qui). Ma in OL3 questa proprietà non c’è più e allora dobbiamo procedere in altro modo.

Possiamo ottenere un effetto simile, usando la proprietà extent dell’oggetto ol.View; essa fissa i limiti entro cui può trovarsi il centro della mappa visualizzata e ha questa sintassi:

extent: [minX, minY, maxX, maxY] 

cioè si specifica il vettore delle coordinate limite del bounding-box entro cui  vogliamo contenere il centro mappa.

extent bbox

Limitare la posizione del centro mappa, implica di conseguenza che anche l’area geografica visualizzabile non può andare oltre certi confini (dipende anche dal livello di zoom impostato); quindi si riproduce in un certo modo lo stesso effetto del metodo restrictedExtent in OL2.

Il seguente codice è un esempio di come si applica:

Poichè le coordinate minX, minY, … etc, sono espresse nel sistema EPSG 4326, ed essendo il sistema per visualizzare la mappa quello di default (cioè EPSG 3857), non possiamo assegnarle direttamente alla proprietà extent. Perciò si usa il metodo ol.proj.transformExtent che effettua la trasformazione delle coordinate da EPSG 4326 a EPSG 3857.

Da notare che abbiamo usato ol.proj.transformExtent e non il simile ol.proj.transform (usato per fissare le coordinate del centro mappa), perchè quest’ultimo trasformerebbe correttamente solo le prime due coordinate del vettore maxExtent.

Per capire meglio come funziona l’extent, nel seguente esempio è stato visualizzato il bounding-box entro cui si può spostare il centro mappa; per farlo si è aggiunto un vettore poligono in formato geoJSON che lo riproduce. Il codice da aggiungere a quello precedente è:

Poichè quando si usa lo zoom in riduzione (zoom out), l’area geografica della mappa rappresentata dentro la cornice si estende, assieme all’impostazione dell’ extent, un’altra cosa che da fare per limitare l’area della mappa, è fissare il livello minimo di zoom con la relativa proprietà minZoom di ol.View.
Qui potete vedere un esempio completo:

webmap esempio

condividi: