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

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 tipico tile PNG di 256×256 è di 30-200 KB a seconda della densità del contenuto. 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 sempre verso nord.
• 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, a 60 frame al secondo.

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

• Payload piccoli. La geometria codificata in binario è molto più compatta di un'immagine renderizzata. Un tipico tile vettoriale per un'area urbana densa è di 15-50 KB contro 80-200 KB per il tile raster equivalente.
• 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 le misurazioni del mondo reale per un tile di mappa dell'Amsterdam centrale al livello di zoom 14:

Su larga scala, i tile vettoriali riducono la larghezza di banda relativa alla mappa di 60-80%. Per un'app a traffico medio che genera 10 milioni di richieste di tile al mese, quella differenza riduce significativamente i costi di uscita del CDN.

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 a 60fps 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.

Install the SDK

npm install @mapmetrics/mapmetrics-gl

Or via CDN for plain HTML projects:

<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>

Render a vector map

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://tiles.mapatlas.eu/styles/basic/style.json?key=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
});

The style URL points to a JSON file hosted on MapAtlas servers that defines all layers, fonts, and sources. You can also host a custom style JSON yourself to control every visual aspect of the map, see the Map Visualization & Styling guide.

Switch to dark mode at runtime

document.getElementById('toggle-dark').addEventListener('click', () => {
  const isDark = map.getStyle().name?.includes('dark');
  map.setStyle(
    isDark
      ? 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY'
      : 'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY'
  );
});

No new tile requests are triggered for data that's already cached. Only the style changes, the tiles remain the same binary geometry, re-rendered with new colors.

Add a GeoJSON data layer

One of the most powerful vector tile features is overlaying your own data as a styled layer:

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,
    },
  });
});

This pattern, add a source, add a layer, paint with style expressions, is the same for heatmaps, route lines, isochrone polygons, and choropleth maps. It works because vector tiles give the renderer raw geometry, not finished pixels.

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.