Tile vettoriali vs. tile raster: cosa dovrebbe usare la tua app web

Quando integri una mappa in un'app web, una decisione architettonica modella tutto quello che segue: tile raster o tile vettoriali. Se la fai bene, la tua mappa è veloce, bella e adattabile. Se la fai male, stai spedendo un'immagine di sfondo pixelata e lenta che combatte il tuo sistema di design ad ogni turno.

Questa guida spiega la differenza tecnica tra i due formati, esamina i compromessi del mondo reale che importano effettivamente a uno sviluppatore frontend e ti fornisce un framework decisionale chiaro. Alla fine, saprai esattamente quale formato scegliere per il tuo progetto e come iniziare con i tile vettoriali su MapAtlas.

La domanda sul formato dei tile emerge all'inizio di quasi ogni progetto di mappatura, e internet è pieno di risposte superficiali che si fermano a "i tile vettoriali sono più nuovi". Questa guida va più a fondo, coprendo pipeline di rendering, dimensioni del payload, compatibilità del browser, controllo dello stile e gli scenari specifici in cui i tile raster rimangono la scelta giusta.

Se stai già costruendo e hai semplicemente bisogno del codice, vai alla sezione Quick Start.

Cosa sono i tile raster?

Un tile raster è un'immagine PNG o JPEG pre-renderizzata, tipicamente di 256×256 o 512×512 pixel, che rappresenta una fetta fissa del mondo a uno specifico livello di zoom. Quando un utente scorre o ingrandisce, il browser richiede i tile adiacenti o a risoluzione più alta, che il server ha già renderizzato e memorizzato nella cache.

Il rendering avviene interamente dal lato del server. L'immagine del tile che arriva nel browser è un'immagine finita, i pixel sono già posizionati, i colori sono già inseriti. Il compito del browser è semplicemente visualizzarlo.

Come funzionano i server di tile raster

Uno stack di tile raster in genere assomiglia a questo:

1. I dati geografici grezzi (OpenStreetMap, dati catastali, modelli di elevazione) vengono elaborati in un database.
2. Un motore di rendering (Mapnik è la scelta classica) pre-renderizza i tile a ogni livello di zoom in una cache di tile.
3. Un server di tile (TileServer GL in modalità raster, o un CDN gestito) distribuisce le immagini in cache per convenzione URL /{zoom}/{x}/{y}.png.

Il risultato è semplice, veloce e senza stato. Qualsiasi client HTTP può richiedere un tile, un browser, un'app mobile, un processo lato server che genera un'immagine della mappa o un'applicazione desktop GIS.

Forze dei tile raster

• Zero overhead di rendering dal lato client. Il browser visualizza semplicemente un'immagine. Nessun WebGL richiesto, nessuna compilazione dello shader, nessun rendering di font.
• Compatibilità universale. Funziona in qualsiasi browser, qualsiasi versione, incluso Internet Explorer e ambienti di rendering headless.
• Aspetto prevedibile. La mappa appare esattamente come il server di tile l'ha renderizzata. Nessuna variabilità dal lato client.
• Generazione facile di immagini dal lato server. Perfetto per generare immagini di mappe statiche per email, report PDF o carte di condivisione sui social.

Debolezze dei tile raster

• Dimensioni di file grandi. Un tile PNG di 256×256 va da un paio di KB in aperta campagna a circa 40-45 KB su un centro città denso. Un tile Retina (512×512) ha quattro volte il conteggio dei pixel.
• Pixelazione su schermi ad alta DPI. Un tile renderizzato per un display 1x appare sfocato su uno schermo Retina 2x a meno che non servi tile @2x, raddoppiando la tua larghezza di banda.
• Nessuna rotazione o inclinazione. Se ruoti una mappa raster, le etichette di testo ruotano con essa e diventano illeggibili. Questo è il motivo per cui le mappe raster sono quasi sempre mostrate con il nord in alto.
• Nessun cambio di stile dal lato client. Vuoi cambiare il colore della strada, nascondere le icone dei POI o passare alla modalità scura? Hai bisogno di un nuovo set di tile, pre-renderizzato dal lato server.
• Interpolazione dello zoom. Tra i livelli di zoom interi, il browser scala l'immagine esistente, il che la sfoca. La sensazione "zoom fluido" che ottieni con i tile vettoriali non esiste con il raster.

Cosa sono i tile vettoriali?

Un tile vettoriale contiene i dati geografici grezzi per una regione della mappa, geometrie stradali, poligoni di edifici, corpi idrici, aree di uso del suolo, dati di posizionamento delle etichette, codificati come binario compatto (solitamente il formato Mapbox Vector Tile, .mvt). Il tile non contiene pixel. Descrive cosa esiste in quella regione, non come dovrebbe apparire.

Il rendering avviene interamente dal lato client, utilizzando WebGL. Quando carichi una mappa compatibile con Mapbox GL JS (come MapAtlas), l'SDK richiede tile vettoriali, riceve dati di geometria e utilizza la tua specifica di stile per disegnare ogni strada, edificio ed etichetta a un elemento <canvas> in tempo reale, fino a 60 frame al secondo su hardware adeguato.

Come funziona il rendering dei tile vettoriali

Tile vettoriale (.mvt) + Style JSON → WebGL shader → Pixel canvas

Lo Style JSON (un file strutturato che controlli) dice al renderer: disegna le strade in questo colore, disegna le estrusioni degli edifici a questa altezza, usa questo font per le etichette, nascondi questi tipi di layer sotto zoom 12. Lo stile può essere cambiato a runtime, senza recuperare nuovi tile.

Forze dei tile vettoriali

• Meno download durante lo zoom. Un tile vettoriale viene scaricato fino allo zoom massimo della sorgente (spesso 14) e riutilizzato per ogni livello di zoom più ravvicinato, mentre una mappa raster scarica quattro nuovi tile per ogni livello di zoom. Nei centri città densi un singolo tile vettoriale può essere più grande del suo equivalente raster, quindi il risparmio deriva dal riutilizzo più che da file più piccoli.
• Nitido a qualsiasi risoluzione. La geometria vettoriale si ridimensiona matematicamente. Un display Retina riceve lo stesso tile di un display standard, il renderer semplicemente produce più pixel. Non sono necessarie varianti di tile @2x.
• Zoom e rotazione fluidi. Poiché il renderer lavora su geometria grezza, lo zoom può essere interpolato continuamente (non solo a livelli interi) e la mappa può essere inclinata e ruotata con etichette sempre verticali.
• Controllo completo dello stile dal lato client. Cambia qualsiasi proprietà visiva, colore della strada, font dell'etichetta, visibilità del layer, opacità, aggiornando l'oggetto stile. Nessuna nuova richiesta di tile. La modalità scura è uno scambio di Style JSON, non un nuovo set di tile.
• Estrusione dell'edificio 3D. I tile vettoriali includono metadati di altezza degli edifici. I renderer possono estrudere poligoni in 3D usando WebGL. I tile raster non hanno alcun concetto di elevazione.
• Styling basato sui dati. Colora le strade in base al limite di velocità, ombreggia l'uso del suolo per categoria, scala i marcatori in base alla popolazione, tutto guidato dalle proprietà dei dati nel tile senza toccare il server.

Debolezze dei tile vettoriali

• WebGL richiesto. Nessun supporto WebGL significa nessun rendering dei tile vettoriali. Questo esclude browser molto vecchi (IE11) e certi ambienti headless.
• Carico CPU/GPU dal lato client. Il rendering avviene sul dispositivo dell'utente. Su telefoni Android di fascia bassa o desktop molto carichi, gli stili di mappa complessi con molti layer possono causare cali di frame.
• Configurazione iniziale più complessa. Hai bisogno di una libreria di rendering (Mapbox GL JS, MapLibre GL o l'SDK di MapAtlas) e uno Style JSON, non solo un tag <img>.
• Caricamento di font e glifi. Il rendering dell'etichetta richiede che i file di glifi siano serviti separatamente. Questo aggiunge alcuni richieste di rete extra al primo caricamento.

Confronto delle prestazioni: numeri reali

Per rendere concreto il compromesso, ecco come si confronta il centro di Amsterdam al livello di zoom 14 sui tile server pubblici di OpenStreetMap (misurato a settembre 2026):

Su larga scala, la differenza si vede più nel numero di richieste che nei byte. Un test di carico sottoposto a peer review ha rilevato che le interazioni di zoom e pan scaricavano uno o due tile vettoriali contro 40 tile raster, anche se i tile vettoriali trasportavano più dati. Per un'app a traffico medio che genera 10 milioni di richieste di tile al mese, ridurre le richieste conta, perché la richiesta di tile è l'unità su cui un'API di mappe basa la fatturazione.

Quando usare i tile raster

I tile raster non sono obsoleti. Ci sono scenari chiari in cui rimangono la scelta giusta:

Integrazione del sistema legacy. Se stai incorporando una mappa in un'app .NET WebForms, una vista renderizzata dal server Rails, o un ambiente in cui controlli solo HTML e JavaScript di base, un layer di tile raster tramite Leaflet o OpenLayers è più semplice e affidabile rispetto all'introduzione di un renderer WebGL.

Generazione di immagini della mappa dal lato server. Se hai bisogno di renderizzare snapshot della mappa su un server Node.js per template email, esportazioni PDF o immagini open graph, il rendering raster headless è il tuo percorso. Strumenti come node-canvas più una fonte di tile raster funzionano dove WebGL non lo fa.

Immagini satellitari e aeree. La fotografia aerea è dati raster per natura. Anche su una mappa vettoriale, il layer di immagini satellitari è sempre distribuito come tile raster. Le mappe ibride mescolano entrambi i formati, vettoriale per strade ed etichette, raster per la base fotografica.

Casi d'uso molto semplici. Incorporare una mappa statica della posizione su una pagina di contatto? Una semplice configurazione Leaflet + OpenStreetMap raster richiede 20 minuti e ha complessità JavaScript zero. L'aggiornamento ai tile vettoriali non è giustificato per un pin di posizione non interattivo.

Quando usare i tile vettoriali

Scegli i tile vettoriali per qualsiasi applicazione web moderna in cui ti importa:

• Styling del brand personalizzato. Se il tuo sistema di design ha colori specifici, dovrebbe averli anche la tua mappa. I tile vettoriali rendono questo un cambiamento JSON.
• Supporto della modalità scura. Uno Style JSON scuro è un file di configurazione. Il passaggio tra chiaro e scuro è una chiamata a map.setStyle().
• Nitidezza ad alta DPI / Retina. Particolarmente importante per app mobile-first e qualsiasi UI in cui il rendering nitido è una priorità di progettazione.
• Esperienza utente fluida. L'interpolazione continua dello zoom e il rendering fluido di una mappa vettoriale sono immediatamente notevoli agli utenti. Le mappe raster si sentono goffe in confronto nei contesti interattivi.
• Layer di visualizzazione dei dati. Aggiungere una mappa di calore, una coropleta o un layer di clustering a una mappa vettoriale richiede solo configurazione dal lato client. Su una mappa raster, dovresti far saltare in aria un nuovo layer o usare un hack di overlay canvas.
• Prospettive 3D o inclinate. Realizzabile solo con tile vettoriali e WebGL.

Quick Start: tile vettoriali con MapAtlas

MapAtlas distribuisce tile vettoriali tramite un'API compatibile con Mapbox GL JS. Se hai usato Mapbox GL JS prima, la migrazione è un cambio di URL di stile e uno scambio di chiave API. Se stai iniziando da zero, ecco la configurazione completa.

Installa l'SDK

npm install @mapmetrics/mapmetrics-gl

Oppure tramite CDN per progetti in HTML semplice:

<link rel="stylesheet" href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" />
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>

Come renderizzare una mappa vettoriale

import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const map = new mapmetricsgl.Map({
  container: 'map',         // ID of your <div>
  style: 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY',
  center: [4.9041, 52.3676], // [longitude, latitude], Amsterdam
  zoom: 12,
  pitch: 0,     // 0 = top-down, 60 = 3D tilted
  bearing: 0,   // 0 = north-up, any value = rotated
});

L'URL style punta a un file JSON ospitato sui server di MapAtlas che definisce tutti i layer, i font e le sorgenti. Puoi anche ospitare tu stesso uno style JSON personalizzato per controllare ogni aspetto visivo della mappa: consulta la guida alla visualizzazione e allo styling delle mappe.

Come passare alla modalità scura a runtime

const LIGHT_STYLE = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY';
const DARK_STYLE  = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_DARK_STYLE_ID/style.json&token=YOUR_API_KEY';
let isDark = false;

document.getElementById('toggle-dark').addEventListener('click', () => {
  isDark = !isDark;
  map.setStyle(isDark ? DARK_STYLE : LIGHT_STYLE);
});

Per i dati già in cache non parte nessuna nuova richiesta di tile. Cambia solo lo stile: i tile restano la stessa geometria binaria, renderizzata di nuovo con colori diversi.

Come aggiungere un layer di dati GeoJSON

Una delle funzionalità più utili dei tile vettoriali è la possibilità di sovrapporre i tuoi dati come layer stilizzato:

map.on('load', () => {
  // Add your own data source
  map.addSource('delivery-zones', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [[[4.85, 52.34], [4.95, 52.34], [4.95, 52.40], [4.85, 52.40], [4.85, 52.34]]],
          },
          properties: { zone: 'Zone A', capacity: 150 },
        },
      ],
    },
  });

  // Style it as a colored fill layer
  map.addLayer({
    id: 'delivery-zones-fill',
    type: 'fill',
    source: 'delivery-zones',
    paint: {
      'fill-color': '#97C70A',
      'fill-opacity': 0.2,
    },
  });

  map.addLayer({
    id: 'delivery-zones-outline',
    type: 'line',
    source: 'delivery-zones',
    paint: {
      'line-color': '#97C70A',
      'line-width': 2,
    },
  });
});

Questo schema (aggiungi una sorgente, aggiungi un layer, applica lo stile con le style expression) è lo stesso per mappe di calore, linee di percorso, poligoni isocroni e mappe coropletiche. Funziona perché i tile vettoriali forniscono al renderer la geometria grezza, non pixel già pronti.

Migrazione da raster a vettoriale

Se hai un'installazione Leaflet + tile raster esistente e desideri aggiornare, ecco il percorso di migrazione minimo:

1. Sostituisci Leaflet con l'SDK di MapAtlas (o MapLibre GL JS se preferisci un renderer completamente open-source).
2. Sostituisci l'URL del tile con un URL di Style JSON di MapAtlas.
3. Sposta gli overlay dai layer Leaflet ai sorgenti e ai layer GL JS.
4. Testa su ambienti senza WebGL. Aggiungi un messaggio di fallback o di degradazione elegante per la piccola percentuale di utenti che non avranno WebGL disponibile.

Il risultato funzionale è una mappa che appare più nitida, si carica più velocemente e può essere ristyled senza toccare il server.

Per una procedura completa di aggiunta di marcatori, popup, ricerca di indirizzi e integrazione React su una base di tile vettoriale, consulta Come aggiungere mappe interattive al tuo sito web.

Per spingere lo stile oltre, modalità scura, colori del brand, font personalizzati, rimozione della filigrana, consulta Come stilizzare una mappa personalizzata del brand.

E se stai valutando MapAtlas rispetto a Google Maps da un punto di vista di costo e funzionalità, MapAtlas vs. Google Maps: perché gli sviluppatori stanno passando copre le differenze chiave.

Riepilogo: il framework decisionale

Se stai costruendo qualcosa di interattivo nel 2026, i tile vettoriali sono la scelta predefinita. I tile raster sono l'eccezione deliberata per vincoli di compatibilità o rendering specifici.

Pronto a costruire con tile vettoriali? Iscriviti per una chiave API MapAtlas gratuita, nessuna carta di credito richiesta. La tua chiave funziona su tile, geocoding, routing e API isocrone dal primo giorno.