Visualizzare raster suddivisi in tiles TMS

Ricollegandoci a questo altro articolo: Visualizzare raster grandi e zoomabili con Leaflet, vediamo come visualizzare delle immagini raster suddivise in tiles TMS, come quelle generate con GDAL2tiles, con OpenLayers.

Ricordiamo che i sistemi/servizi di tiles seguono due possibili formati:

  • il formato XYZ (detto anche formato Google o slippy map) che è il più diffuso;
  • il formato OSGeo TMS (Tile Map Service) che è quello usato da GDAL2tiles;

in entrambi i formati, ogni tile è identificata da tre valori: x, y e z; la coppia (x, y) indica la posizione della tile nel grigliato che compone la immagine/mappa, la z indica il livello di zoom (da 0 a 19 che in genere è il max valore consentito). La differenza tra i due formati, sta nel modo con cui viene determinata la y: in pratica hanno il senso crescente invertito, ovvero è invertita l’origine (0,0) del grigliato.

Per spiegarci meglio, la seguente figura mostra  la griglia e le coordinate delle tiles  della mappa del mondo a livello zoom 1, nei due diversi formati:

tiles XYZ e TMS

In OL abbiamo la classe ol.source.XYZ che consente di riferire delle immagini suddivise in tiles nel formato XYZ tramite il corrispondente URL (remoto oppure locale); di seguito un tipico esempio, in cui si definisce una basemap  resa disponibile da un servizio di tiles XYZ:

notate che le singole tiles vengono indicate con la sequenza di coordinate {z}/{x}/{y} .

La classe ol.source.XYZ va ancora bene anche per immagini suddivise in tiles TMS; infatti, per quanto detto prima, basta trasformare la sequenza delle coordinate invertendo la y, cioè scrivendole così: {z}/{x}/{-y}. Questa soluzione è anche chiarita sulla sua documentazione online:

ol.source.XYZ

Di seguito, vediamo un esempio OL in cui viene caricata la stessa immagine TMS (foto satellitare zona Locarno) che abbiamo usato come esempio finale nell’articolo Visualizzare raster grandi e zoomabili con Leaflet :

per vedere l’esempio completo e funzionante cliccate sul bottone: 
webmap esempio

in esso, per chiarire meglio su come viene composta l’immagine al variare del livello di zoom, è stato anche inserito un layer che mostra il reticolo delle tiles TMS e le relative coordinate.

condividi: