如何在Mapbox Web地图中展示存储于S3的MBTiles矢量瓦片

问题描述 #

通过ogr2ogr -f MVT -dsco FORMAT=MBTILES -dsco MAXZOOM=10 target.mbtiles data.geojson生成的MBTiles矢量瓦片存储在S3桶中，在QGIS中可正常展示，但在Mapbox GL JS中加载时出现以下错误：

Could not load image because of The source image could not be decoded.. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.
    at ajax.js:301:18

当前代码错误地将MBTiles以**栅格（raster）**类型加载，这是问题的核心。

核心原因 #

MBTiles本质是SQLite数据库容器，内部存储的是矢量瓦片切片（.pbf格式），并非可直接渲染的图片文件。Mapbox GL JS无法直接读取MBTiles文件，必须提取其中的矢量切片并通过标准瓦片URL模板访问。

正确解决步骤 #

1. 导出MBTiles为标准矢量瓦片目录结构 #

使用mb-util工具将MBTiles中的矢量切片导出为/{z}/{x}/{y}.pbf的目录结构：

mb-util --image_format=pbf target.mbtiles tiles-directory

将导出的tiles-directory完整上传到S3桶，同时确保S3桶开启静态网站托管，且所有.pbf文件权限设置为公开可读。

2. 修改Mapbox GL JS代码加载矢量瓦片 #

将代码中的源类型从raster改为vector，并配置正确的瓦片URL模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MBTiles Map</title>
    <style>
        #map {
            width: 100%;
            height: 400px;
        }
    </style>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <link
        href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css"
        rel="stylesheet"
    />
</head>
<body>
    <div id="map"></div>

    <script>
        mapboxgl.accessToken = '你的Mapbox Token';

        var map = new mapboxgl.Map({
            container: 'map', 
            style: 'mapbox://styles/mapbox/streets-v11', 
            zoom: 10
        });

        map.on('load', function () {
            // 添加矢量瓦片源
            map.addSource('local-vector-tiles', {
                type: 'vector',
                // 替换为你的S3静态托管域名+瓦片目录路径
                tiles: ['https://你的S3静态域名/tiles-directory/{z}/{x}/{y}.pbf'],
                tileSize: 256
            });

            // 添加矢量瓦片渲染图层（需匹配MBTiles内的图层名）
            map.addLayer({
                id: 'vector-layer',
                type: 'fill', // 根据数据类型选择fill/line/symbol等
                source: 'local-vector-tiles',
                'source-layer': 'data', // 这里填MBTiles内的实际图层名（可通过QGIS查看）
                paint: {
                    'fill-color': '#ff0000',
                    'fill-opacity': 0.5
                }
            });
        });
    </script>
</body>

3. 关键注意事项 #

• 确认source-layer的名称：打开QGIS查看MBTiles的图层名，必须与代码中完全一致（ogr2ogr生成的默认图层名通常为data）。
• S3权限配置：确保静态托管已开启，且所有.pbf文件的访问权限为公开可读。
• 图层渲染类型：根据矢量数据的几何类型（面/线/点）选择对应的type（fill/line/symbol）。

内容的提问来源于stack exchange，提问作者JNN