Tippecanoe 生成的 pbf 存储在 s3 上并在 mapbox-gl 上可视化

Question

我正在开发这个项目，我需要使用tippecanoe生成protobuf文件，将它们存储在s3存储桶上并使用mapbox-gl将其可视化。
我使用 -e 选项生成矢量切片以写入我选择的文件夹，并--no-tile-size-limit避免--no-tile-compression数据预期方式出现任何差异。然后我将所有这些文件上传到 s3 存储桶。然后，我尝试通过修改https://docs.mapbox.com/mapbox-gl-js/example/third-party/
上的代码来可视化这一点。我的代码是：

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    zoom: 12,
    center: [-77,38]
});
map.on('load', function() {
    map.addLayer({
        "id": "test",
        "type": "circle",
        "source": {
            "type": "vector",
            "tiles": ["<link_to_my_cloudfront>/{z}/{x}/{y}.pbf"],
            "maxzoom": 11
        },
        "source-layer": "trees",
        "paint": {
            "circle-radius": 3,
            "circle-color": "#000000",
            "circle-stroke-width": 1
        }
    }
});

我可以从 Tippecanoe 生成的元数据文件中确认该 ID 与我这里的 ID 匹配。
问题是当我加载地图时。对 pbf 文件的请求的响应是 200，content-type但application/x-protobuf这些点没有显示在地图上。我是否使用了一些不正确的选项，或者只是不兼容。我很难相信是后者，因为 Tippecanoe 和 Mapbox-gl 都是由 Mapbox 开发的，并且众所周知它们非常强大。

Answer 1

我想到了两种可能性：

1. 这些文件正在被 gzip 压缩，但没有正确的内容类型。通常这会在控制台中显示错误，例如“不支持的记录类型 4”。
2. 切片服务正常，但矢量源层却不是trees。您可以使用https://stevage.github.io/vector-inspector来检查。如果您发布实际的 URL，我们可能可以进一步诊断。

一般来说，在 S3 上托管切片是相当复杂的。请参阅https://github.com/terriajs/boundary-tiles了解一种配置。