矢量瓦片与栅格瓦片：您的Web应用该选择哪种？

在 Web 应用中集成地图时，有一个架构决策会影响后续的一切：用栅格瓦片还是矢量瓦片。选对了，地图加载快、显示清晰、容易调整。选错了，您交付的就是一张像素化、反应迟缓的背景图，处处与您的设计系统冲突。

本指南解释两种格式的技术差异，梳理对前端开发者真正有影响的实际权衡，并给出一个清晰的决策框架。读完之后，您会明确知道自己的项目该选哪种格式，以及如何在 MapAtlas 上开始使用矢量瓦片。

瓦片格式的问题几乎在每个地图项目的早期都会出现，而网上很多答案停留在「矢量瓦片更新」这种表面层次。本指南会更深入地讨论渲染管线、数据载荷大小、浏览器兼容性、样式控制，以及栅格瓦片仍然是正确选择的具体场景。

如果您已经在开发、只需要代码，请直接跳到 快速上手 部分。

什么是栅格瓦片

栅格瓦片是预先渲染好的 PNG 或 JPEG 图片，通常为 256×256 或 512×512 像素，表示某个缩放级别下世界的一个固定切片。用户平移或缩放时，浏览器会请求相邻或分辨率更高的瓦片，这些瓦片已由服务器渲染并缓存好。

渲染完全在服务器端完成。到达浏览器的瓦片是一张成品图片，像素已经排好，颜色已经固定。浏览器要做的只是把它显示出来。

栅格瓦片服务器的工作方式

典型的栅格瓦片技术栈如下：

1. 原始地理数据（OpenStreetMap、地籍数据、高程模型）经过处理后存入数据库。
2. 渲染引擎（Mapnik 是经典选择）在每个缩放级别预渲染瓦片，存入瓦片缓存。
3. 瓦片服务器（栅格模式下的 TileServer GL，或托管 CDN）按照 /{zoom}/{x}/{y}.png 的 URL 约定提供缓存的图片。

这种方式简单、快速且无状态。任何 HTTP 客户端都可以请求瓦片，无论是浏览器、移动应用、生成地图图片的服务器端进程，还是 GIS 桌面应用。

栅格瓦片的优势

• 客户端零渲染开销。 浏览器只需显示图片。不需要 WebGL，不需要编译着色器，也不需要渲染字体。
• 兼容性覆盖所有环境。 适用于任何浏览器的任何版本，包括 Internet Explorer 和无头渲染环境。
• 外观可预测。 地图的样子与瓦片服务器渲染的结果完全一致，不存在客户端差异。
• 便于在服务器端生成图片。 非常适合为邮件、PDF 报告或社交分享卡片生成静态地图图片。

栅格瓦片的劣势

• 文件体积大。 一张 256×256 PNG 瓦片的大小，从开阔乡野上空的几 KB 到密集城市中心的约 40-45 KB 不等。Retina（512×512）瓦片的像素数是它的四倍。
• 在高 DPI 屏幕上出现像素化。 为 1x 屏幕渲染的瓦片在 2x Retina 屏幕上会显得模糊，除非提供 @2x 瓦片，而那会让带宽翻倍。
• 不支持旋转或倾斜。 旋转栅格地图时，文字标注会跟着旋转，变得难以阅读。这就是栅格地图几乎总是以上北下南方式显示的原因。
• 无法在客户端修改样式。 想改道路颜色、隐藏 POI 图标或切换到深色模式？您需要一套在服务器端重新预渲染的新瓦片。
• 缩放插值效果差。 在整数缩放级别之间，浏览器会拉伸现有图片，导致画面模糊。矢量瓦片那种「平滑缩放」的感觉，在栅格瓦片中并不存在。

什么是矢量瓦片

矢量瓦片包含一个地图区域的原始地理数据，包括道路几何、建筑多边形、水体、土地利用区域和标注位置数据，并以紧凑的二进制格式编码（通常为 Mapbox Vector Tile 格式，.mvt）。瓦片中不包含任何像素。它描述的是该区域中有什么，而不是应该长什么样。

渲染完全在客户端通过 WebGL 完成。加载一个兼容 Mapbox GL JS 的地图（例如 MapAtlas）时，SDK 请求矢量瓦片，接收几何数据，然后按照您的样式规范，在性能足够的硬件上以最高每秒 60 帧的速度把每条道路、每栋建筑和每个标注实时绘制到 <canvas> 元素上。

矢量瓦片的渲染方式

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

样式 JSON（一个由您控制的结构化文件）告诉渲染器：道路用什么颜色绘制，建筑拉伸到什么高度，标注使用什么字体，缩放级别低于 12 时隐藏哪些图层类型。样式可以在运行时修改，无需重新获取瓦片。

矢量瓦片的优势

• 缩放时下载更少。 矢量瓦片只下载到数据源的最大缩放级别（通常为 14），之后更近的每个缩放级别都复用这张瓦片，而栅格地图每放大一级都要下载四张新瓦片。在密集的城市中心，单张矢量瓦片可能比对应的栅格瓦片更大，所以节省来自复用，而不是来自更小的文件。
• 在任何分辨率下都清晰。 矢量几何按数学方式缩放。Retina 屏幕和普通屏幕获取的是同一张瓦片，渲染器只是输出更多像素，不需要 @2x 瓦片变体。
• 平滑缩放和旋转。 由于渲染器处理的是原始几何数据，缩放可以连续插值（而不只是整数级别），地图也可以倾斜和旋转，标注始终保持正向。
• 完全的客户端样式控制。 只需更新样式对象，就能修改任何视觉属性，例如道路颜色、标注字体、图层可见性和透明度，无需请求新瓦片。深色模式只是换一份样式 JSON，而不是换一套瓦片。
• 3D 建筑拉伸。 矢量瓦片包含建筑高度元数据，渲染器可以用 WebGL 把多边形拉伸成 3D。栅格瓦片没有高度的概念。
• 数据驱动的样式。 按限速给道路着色，按类别给土地利用区域填色，按人口缩放标记，全部由瓦片中的数据属性驱动，无需改动服务器。

矢量瓦片的劣势

• 需要 WebGL。 不支持 WebGL 就无法渲染矢量瓦片。这会排除非常旧的浏览器（IE11）和部分无头环境。
• 客户端 CPU/GPU 负载。 渲染在用户设备上进行。在低端 Android 手机或负载很高的台式机上，图层众多的复杂地图样式可能导致掉帧。
• 初始配置更复杂。 您需要一个渲染库（Mapbox GL JS、MapLibre GL 或 MapAtlas SDK）和一份样式 JSON，而不只是一个 <img> 标签。
• 字体和字形加载。 标注渲染需要单独提供字形文件，首次加载时会多出几个网络请求。

性能对比：实测数据

为了让权衡更具体，下面是阿姆斯特丹市中心在缩放级别 14 下，于公共 OpenStreetMap 瓦片服务器上的对比（2026 年 9 月实测）：

在规模化场景下，差异更多体现在请求数量上，而不是字节数上。一项经过同行评审的负载测试发现，缩放和平移操作只获取了一到两张矢量瓦片，而栅格瓦片需要 40 张，尽管矢量瓦片携带的数据更多。对于每月产生 1000 万次瓦片请求的中等流量应用，请求更少就很关键，因为瓦片请求正是地图 API 的计费单位。地图 API 价格页面 列出了瓦片、地理编码和路线规划的请求档位。

什么时候使用栅格瓦片

栅格瓦片并没有过时。在一些明确的场景下，它仍然是正确的选择：

集成老旧系统。 如果您要在 .NET WebForms 应用、服务器端渲染的 Rails 视图，或者只能控制 HTML 和基础 JavaScript 的环境中嵌入地图，通过 Leaflet 或 OpenLayers 加载栅格瓦片图层，比引入 WebGL 渲染器更简单可靠。

在服务器端生成地图图片。 如果您需要在 Node.js 服务器上为邮件模板、PDF 导出或 Open Graph 图片渲染地图快照，无头栅格渲染就是可行的路径。node-canvas 加栅格瓦片源这样的工具，在 WebGL 不可用的地方也能工作。

卫星和航拍影像。 航拍照片本质上就是栅格数据。即使在矢量地图上，卫星影像图层也总是以栅格瓦片形式提供。混合地图同时使用两种格式：道路和标注用矢量，摄影底图用栅格。

非常简单的使用场景。 只是在联系页面嵌入一张静态位置地图？一个简单的 Leaflet + OpenStreetMap 栅格方案 20 分钟就能搭好，没有任何 JavaScript 复杂度。对于一个不需要交互的位置标记，升级到矢量瓦片并不划算。

什么时候使用矢量瓦片

如果您的现代 Web 应用关注以下任何一点，就选择矢量瓦片：

• 自定义品牌样式。 如果您的设计系统有特定配色，地图也应该一致。矢量瓦片让这件事只需修改 JSON。
• 支持深色模式。 深色样式 JSON 只是一个配置文件，在浅色和深色之间切换只需调用一次 map.setStyle()。
• 高 DPI / Retina 屏幕清晰度。 对移动优先的应用，以及任何把清晰渲染作为设计重点的界面尤其重要。
• 流畅的用户体验。 矢量地图的连续缩放插值和流畅渲染，用户马上就能感受到。在交互场景中，栅格地图相比之下显得卡顿。
• 数据可视化图层。 在矢量地图上添加热力图、分级统计图或聚合图层，只需客户端配置。在栅格地图上，您得重新批量生成一套瓦片图层，或者用 canvas 叠加层来变通。
• 3D 或倾斜视角。 只有矢量瓦片配合 WebGL 才能实现。

快速上手：在 MapAtlas 上使用矢量瓦片

MapAtlas 通过兼容 Mapbox GL JS 的 API 提供矢量瓦片。如果您用过 Mapbox GL JS，迁移只需更换样式 URL 和 API 密钥。如果是从零开始，下面是完整的配置步骤。

安装 SDK

npm install @mapmetrics/mapmetrics-gl

对于纯 HTML 项目，也可以通过 CDN 引入：

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

渲染矢量地图

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

style URL 指向托管在 MapAtlas 服务器上的一个 JSON 文件，其中定义了所有图层、字体和数据源。您也可以自行托管自定义样式 JSON，控制地图的每一个视觉细节，详见 地图可视化与样式指南。

在运行时切换到深色模式

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

对于已缓存的数据，不会触发新的瓦片请求。改变的只是样式，瓦片仍是同样的二进制几何数据，只是用新的颜色重新渲染。

添加 GeoJSON 数据图层

矢量瓦片最实用的功能之一，是把您自己的数据作为带样式的图层叠加到地图上：

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

这种模式，即添加数据源、添加图层、用样式表达式着色，同样适用于热力图、路线、等时线多边形和分级统计图。它之所以可行，是因为矢量瓦片交给渲染器的是原始几何数据，而不是成品像素。

从栅格迁移到矢量

如果您已有 Leaflet + 栅格瓦片的方案并希望升级，最简迁移路径如下：

1. 用 MapAtlas SDK 替换 Leaflet（如果您更倾向完全开源的渲染器，也可以用 MapLibre GL JS）。
2. 把瓦片 URL 替换 为 MapAtlas 样式 JSON 的 URL。
3. 迁移叠加层，把 Leaflet 图层改为 GL JS 的数据源和图层。
4. 在不支持 WebGL 的环境中测试。 为少数无法使用 WebGL 的用户添加备用方案或降级提示信息。

最终得到的地图显示更清晰、加载更快，而且无需改动服务器就能修改样式。

关于如何在矢量瓦片底图上添加标记、弹窗、地址搜索以及集成 React 的完整步骤，请参阅 如何在网站中添加交互式地图。

如果想进一步定制样式，例如深色模式、品牌配色、自定义字体、去除水印，请参阅 如何设计自定义品牌地图样式。

如果您正在从成本和功能角度评估 MapAtlas 与 Google Maps，MapAtlas 与 Google Maps 对比：开发者为何转向 介绍了两者的主要差异。

总结：决策框架

如果您在 2026 年开发任何交互式应用，矢量瓦片都是默认选择。栅格瓦片则是出于特定兼容性或渲染限制而刻意采用的例外。

准备好用矢量瓦片开始构建了吗？注册免费的 MapAtlas API 密钥，无需信用卡。从第一天起，同一个密钥即可用于瓦片、地理编码、路线规划和等时线 API。