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

想到的两种可能性：

文件以 gzip 压缩格式提供，但没有正确的 content-type。通常这会在控制台中显示错误，例如 "Unsupported record type 4".
切片服务正常，但矢量源图层不正常 trees。您可以使用 https://stevage.github.io/vector-inspector 来检查。如果您 post 您的实际 URL，我们可能会进一步诊断。

一般来说，在 S3 上托管磁贴非常复杂。一种配置见 https://github.com/terriajs/boundary-tiles。

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

Tippecanoe generated pbf stored on s3 visualised on mapbox-gl

mapbox-gl

mapbox-gl-js

tippecanoe