Tiles vetoriais ou raster: qual sua aplicação web deve usar?

Quando você integra um mapa a uma aplicação web, uma decisão de arquitetura define tudo o que vem depois: tiles raster ou tiles vetoriais. Com a escolha certa, o mapa é rápido, bonito e adaptável. Com a escolha errada, você entrega uma imagem de fundo pixelada e lenta que briga com o seu design system a cada passo.

Este guia explica a diferença técnica entre os dois formatos, mostra os trade-offs práticos que realmente importam para quem desenvolve frontend e oferece um critério de decisão claro. No final, você vai saber exatamente qual formato escolher para o seu projeto e como começar com tiles vetoriais no MapAtlas.

A dúvida sobre o formato dos tiles aparece cedo em quase todo projeto de mapas, e a internet está cheia de respostas superficiais que param em "tiles vetoriais são mais novos". Este guia vai mais fundo: pipelines de renderização, tamanho de payload, compatibilidade com navegadores, controle de estilo e os cenários específicos em que tiles raster continuam sendo a escolha certa.

Se você já está desenvolvendo e só precisa do código, vá direto para a seção Início rápido.

O que são tiles raster?

Um tile raster é uma imagem PNG ou JPEG pré-renderizada, normalmente com 256×256 ou 512×512 pixels, que representa um recorte fixo do mundo em um nível de zoom específico. Quando o usuário arrasta ou aplica zoom, o navegador solicita os tiles vizinhos ou de maior resolução, que o servidor já renderizou e guardou em cache.

A renderização acontece inteiramente no servidor. A imagem que chega ao navegador já está pronta: os pixels já estão posicionados e as cores já estão aplicadas. O trabalho do navegador é apenas exibi-la.

Como funcionam os servidores de tiles raster

Uma stack de tiles raster costuma ter esta estrutura:

1. Dados geográficos brutos (OpenStreetMap, dados cadastrais, modelos de elevação) são processados e carregados em um banco de dados.
2. Um motor de renderização (o Mapnik é a escolha clássica) pré-renderiza os tiles de todos os níveis de zoom em um cache de tiles.
3. Um servidor de tiles (TileServer GL em modo raster, ou uma CDN gerenciada) entrega as imagens em cache seguindo a convenção de URL /{zoom}/{x}/{y}.png.

O resultado é simples, rápido e sem estado. Qualquer cliente HTTP pode solicitar um tile: um navegador, um app mobile, um processo no servidor que gera uma imagem de mapa ou um software GIS de desktop.

Pontos fortes dos tiles raster

• Nenhum custo de renderização no cliente. O navegador só exibe uma imagem. Não precisa de WebGL, de compilação de shaders nem de renderização de fontes.
• Compatibilidade universal. Funciona em qualquer navegador e versão, incluindo o Internet Explorer e ambientes de renderização headless.
• Aparência previsível. O mapa fica exatamente como o servidor de tiles o renderizou. Não há variação no cliente.
• Geração de imagens no servidor sem complicação. Ideal para gerar imagens estáticas de mapas para e-mails, relatórios em PDF ou cards de compartilhamento em redes sociais.

Pontos fracos dos tiles raster

• Arquivos grandes. Um tile PNG de 256×256 vai de alguns KB em áreas abertas a cerca de 40-45 KB sobre um centro urbano denso. Um tile Retina (512×512) tem quatro vezes mais pixels.
• Pixelização em telas de alta densidade. Um tile renderizado para uma tela 1x fica borrado em uma tela Retina 2x, a menos que você sirva tiles @2x e dobre o consumo de banda.
• Sem rotação ou inclinação. Se você gira um mapa raster, os rótulos giram junto e ficam ilegíveis. Por isso os mapas raster quase sempre são exibidos com o norte para cima.
• Sem mudanças de estilo no cliente. Quer mudar a cor das vias, esconder ícones de POI ou ativar o modo escuro? Você precisa de um novo conjunto de tiles, pré-renderizado no servidor.
• Interpolação de zoom. Entre níveis inteiros de zoom, o navegador escala a imagem existente e ela fica borrada. A sensação de "zoom suave" dos tiles vetoriais não existe no raster.

O que são tiles vetoriais?

Um tile vetorial contém os dados geográficos brutos de uma região do mapa (geometria das vias, polígonos de edificações, corpos d'água, áreas de uso do solo, dados de posicionamento de rótulos) codificados em binário compacto, geralmente no formato Mapbox Vector Tile (.mvt). O tile não contém pixels. Ele descreve o que existe naquela região, não como deve aparecer.

A renderização acontece inteiramente no cliente, com WebGL. Quando você carrega um mapa compatível com Mapbox GL JS (como o MapAtlas), o SDK solicita tiles vetoriais, recebe os dados de geometria e usa a sua especificação de estilo para desenhar cada via, edificação e rótulo em um elemento <canvas> em tempo real, a até 60 frames por segundo em hardware com capacidade suficiente.

Como funciona a renderização de tiles vetoriais

Vector tile (.mvt) + Style JSON → WebGL shader → Canvas pixels

O style JSON (um arquivo estruturado que você controla) diz ao renderizador: desenhe as vias nesta cor, faça a extrusão das edificações nesta altura, use esta fonte nos rótulos, esconda estes tipos de camada abaixo do zoom 12. O estilo pode ser alterado em tempo de execução, sem buscar novos tiles.

Pontos fortes dos tiles vetoriais

• Menos downloads ao dar zoom. Um tile vetorial é baixado até o zoom máximo da fonte (muitas vezes 14) e reutilizado em todos os níveis de zoom mais próximos, enquanto um mapa raster baixa quatro tiles novos a cada nível de zoom. Em centros urbanos densos, um único tile vetorial pode ser maior que o equivalente raster, então a economia vem da reutilização, e não de arquivos menores.
• Nitidez em qualquer resolução. A geometria vetorial escala matematicamente. Uma tela Retina recebe o mesmo tile que uma tela comum; o renderizador apenas gera mais pixels. Não é preciso ter variantes @2x.
• Zoom e rotação suaves. Como o renderizador trabalha com a geometria bruta, o zoom pode ser interpolado de forma contínua (não só em níveis inteiros) e o mapa pode ser inclinado e girado com os rótulos sempre na posição de leitura.
• Controle total do estilo no cliente. Mude qualquer propriedade visual (cor das vias, fonte dos rótulos, visibilidade de camadas, opacidade) atualizando o objeto de estilo. Nenhuma nova requisição de tiles. O modo escuro é uma troca de style JSON, não um novo conjunto de tiles.
• Extrusão 3D de edificações. Tiles vetoriais incluem metadados de altura das edificações. Os renderizadores podem extrudar os polígonos em 3D com WebGL. Tiles raster não têm nenhuma noção de elevação.
• Estilo orientado a dados. Colora as vias pelo limite de velocidade, sombreie o uso do solo por categoria, dimensione marcadores pela população, tudo a partir de propriedades de dados do tile, sem mexer no servidor.

Pontos fracos dos tiles vetoriais

• Exige WebGL. Sem suporte a WebGL, não há renderização de tiles vetoriais. Isso exclui navegadores muito antigos (IE11) e alguns ambientes headless.
• Carga de CPU e GPU no cliente. A renderização acontece no dispositivo do usuário. Em celulares Android mais simples ou em desktops sobrecarregados, estilos complexos com muitas camadas podem causar queda de frames.
• Configuração inicial mais complexa. Você precisa de uma biblioteca de renderização (Mapbox GL JS, MapLibre GL ou o SDK do MapAtlas) e de um style JSON, não apenas de uma tag <img>.
• Carregamento de fontes e glyphs. A renderização de rótulos exige que os arquivos de glyphs sejam servidos separadamente. Isso adiciona algumas requisições de rede no primeiro carregamento.

Comparação de desempenho: números reais

Para deixar o trade-off concreto, veja como o centro de Amsterdam no nível de zoom 14 se compara em servidores públicos de tiles do OpenStreetMap (medição de setembro de 2026):

Em escala, a diferença aparece mais no número de requisições do que em bytes. Um teste de carga revisado por pares mostrou que interações de zoom e pan buscavam um ou dois tiles vetoriais contra 40 tiles raster, embora os tiles vetoriais carregassem mais dados. Para um app de tráfego médio que gera 10 milhões de requisições de tiles por mês, menos requisições fazem diferença, porque a requisição de tile é a unidade de cobrança de uma API de mapas. A página de preços da API de mapas mostra as faixas de requisições de tiles ao lado das de geocodificação e roteamento.

Quando usar tiles raster

Tiles raster não estão obsoletos. Existem cenários claros em que eles continuam sendo a escolha certa:

Integração com sistemas legados. Se você está incorporando um mapa em um app .NET WebForms, em uma view Rails renderizada no servidor ou em um ambiente em que só controla HTML e JavaScript básico, uma camada de tiles raster com Leaflet ou OpenLayers é mais simples e confiável do que introduzir um renderizador WebGL.

Geração de imagens de mapa no servidor. Se você precisa renderizar snapshots de mapas em um servidor Node.js para templates de e-mail, exportações em PDF ou imagens Open Graph, a renderização raster headless é o caminho. Ferramentas como node-canvas com uma fonte de tiles raster funcionam onde o WebGL não funciona.

Imagens de satélite e aéreas. Fotografia aérea é, por natureza, um dado raster. Mesmo em um mapa vetorial, a camada de imagens de satélite é sempre entregue como tiles raster. Mapas híbridos misturam os dois formatos: vetorial para vias e rótulos, raster para a base fotográfica.

Casos de uso muito simples. Precisa incorporar um mapa de localização estático em uma página de contato? Uma configuração simples de Leaflet + OpenStreetMap raster leva 20 minutos e não tem nenhuma complexidade de JavaScript. Migrar para tiles vetoriais não se justifica para um pino de localização não interativo.

Quando usar tiles vetoriais

Escolha tiles vetoriais em qualquer aplicação web moderna em que você se importe com:

• Estilo personalizado da marca. Se o seu design system tem cores específicas, o seu mapa também deve ter. Com tiles vetoriais, isso é uma alteração no JSON.
• Suporte a modo escuro. Um style JSON escuro é um único arquivo de configuração. Alternar entre claro e escuro é uma chamada a map.setStyle().
• Nitidez em alta densidade / Retina. Especialmente importante em apps mobile-first e em qualquer interface em que a renderização nítida seja prioridade de design.
• Experiência de uso fluida. A interpolação contínua de zoom e a renderização fluida de um mapa vetorial são percebidas imediatamente pelos usuários. Em contextos interativos, mapas raster parecem travados em comparação.
• Camadas de visualização de dados. Adicionar um heatmap, um mapa coroplético ou uma camada de clusters a um mapa vetorial exige apenas configuração no cliente. Em um mapa raster, você teria de gerar uma nova camada de tiles ou recorrer a um improviso com sobreposição de canvas.
• Perspectivas 3D ou inclinadas. Só são possíveis com tiles vetoriais e WebGL.

Início rápido: tiles vetoriais com MapAtlas

O MapAtlas serve tiles vetoriais por meio de uma API compatível com Mapbox GL JS. Se você já usou o Mapbox GL JS, a migração é uma troca da URL de estilo e da chave de API. Se está começando do zero, esta é a configuração completa.

Instale o SDK

npm install @mapmetrics/mapmetrics-gl

Ou via CDN, em projetos HTML simples:

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

Renderize um mapa vetorial

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

const map = new mapmetricsgl.Map({
  container: 'map',         // ID da sua <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 = visão de cima, 60 = inclinado em 3D
  bearing: 0,   // 0 = norte para cima, qualquer outro valor = girado
});

A URL de style aponta para um arquivo JSON hospedado nos servidores do MapAtlas que define todas as camadas, fontes e sources. Você também pode hospedar seu próprio style JSON para controlar cada aspecto visual do mapa; veja o guia de visualização e estilo de mapas.

Ative o modo escuro em tempo de execução

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

Nenhuma nova requisição de tiles é disparada para dados que já estão em cache. Só o estilo muda: os tiles continuam sendo a mesma geometria binária, renderizada de novo com outras cores.

Adicione uma camada de dados GeoJSON

Um dos recursos mais úteis dos tiles vetoriais é sobrepor seus próprios dados como uma camada estilizada:

map.on('load', () => {
  // Adiciona sua própria source de dados
  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 },
        },
      ],
    },
  });

  // Estiliza como uma camada de preenchimento colorida
  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,
    },
  });
});

Esse padrão (adicionar uma source, adicionar uma camada, pintar com expressões de estilo) é o mesmo para heatmaps, linhas de rota, polígonos de isócronas e mapas coropléticos. Ele funciona porque os tiles vetoriais entregam ao renderizador a geometria bruta, e não pixels prontos.

Como migrar de raster para vetorial

Se você tem uma configuração existente com Leaflet + tiles raster e quer atualizá-la, este é o caminho mínimo de migração:

1. Substitua o Leaflet pelo SDK do MapAtlas (ou pelo MapLibre GL JS, se preferir um renderizador totalmente open source).
2. Substitua a URL dos tiles por uma URL de style JSON do MapAtlas.
3. Migre as sobreposições das camadas do Leaflet para sources e camadas do GL JS.
4. Teste em ambientes sem WebGL. Adicione um fallback ou uma mensagem de degradação elegante para a pequena parcela de usuários que não terá WebGL disponível.

O resultado prático é um mapa mais nítido, que carrega mais rápido e pode mudar de estilo sem mexer no servidor.

Para um passo a passo completo de como adicionar marcadores, popups, busca de endereços e integração com React sobre uma base de tiles vetoriais, veja Como adicionar mapas interativos ao seu site.

Para ir além no estilo (modo escuro, cores da marca, fontes personalizadas, remoção de marca d'água), veja Como estilizar um mapa personalizado com a sua marca.

E se você está avaliando o MapAtlas em relação ao Google Maps do ponto de vista de custo e recursos, MapAtlas vs. Google Maps: por que desenvolvedores estão migrando mostra as principais diferenças.

Resumo: o critério de decisão

Se você vai construir qualquer coisa interativa em 2026, tiles vetoriais são a escolha padrão. Tiles raster são a exceção deliberada para restrições específicas de compatibilidade ou de renderização.

Pronto para desenvolver com tiles vetoriais? Crie sua chave de API gratuita do MapAtlas, sem cartão de crédito. Sua chave funciona desde o primeiro dia nas APIs de tiles, geocodificação, roteamento e isócronas.