2

我正在处理这个项目，我需要使用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 开发的，而且众所周知它们非常强大。

4

1 回答 1

3

想到了两种可能：

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

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

于 2019-07-01T05:19:48.880 回答