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与我在这里的匹配。
问题是当我加载地图时。对pbf文件的请求响应为200，而content-type也是application/x-protobuf，但这些点只是未显示在地图上。我是使用一些不正确的选项还是仅仅是不兼容？我很难相信是后者，因为tippecanoe和mapbox-gl都是由mapbox开发的，并且众所周知它们很健壮。

Answer 1

想到了两种可能性：

正在压缩文件，但没有正确的内容类型。通常，这会在控制台中出现错误，例如“不支持的记录类型4”。
可以很好地提供切片，但是矢量源层不是trees。您可以使用https://stevage.github.io/vector-inspector进行检查。如果您发布实际的网址，我们可能会进一步诊断。

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

Tippecanoe生成的pbf存储在mapbox-gl上显示的s3

1 个答案: