Mapbox-gl 托管 S3 - addsource

Question

我正在做这个项目，我想通过无服务器解决方案将相对动态的数据（每 15 分钟更新一次）添加到 mapbox-gl。 我遵循了这个关于创建无服务器矢量切片的优秀指南并让基础切片正常工作。

我现在的问题是，您将如何实现将 geojson 点层添加到 map（托管在简单的 HTML 页面上），使用类似：

var map = new mapboxgl.Map({
    container: 'map',
    style: style: "https://{domain}/bright.json",
});

var url = 'https://{domain}/geojsonfile.json'

map.addSource('geojsonfile', {
        'type': 'geojson',
        'data': url
    });

map.addLayer({
        'id': 'geojsonfile',
        'type': 'symbol',
        'source': 'geojsonfile',
        'layout': {
            'icon-image': 'rocket-15'
        }
    });

在无服务器矢量环境中，不使用Tippecanoe将 json 文件转换为 protobuf 矢量切片，而是将层从 javascript 文件直接添加到 map。 上面的 addsource 和 addlayer 的 js 来自这个Mapbox 指南。

当我传入 mapboxgl.accessToken 而不是自托管时，我可以让上述 js 工作； 然而，这是我所能得到的。 geojson 文件托管在启用 CORS 的 s3 存储桶中。

是加载源还是显示图层的问题？ 我也尝试过修改 bright.json 文件来处理源和层，这样我只需要替换 s3 文件，但是没有运气。

非常感谢任何和所有帮助/建议。

Answer 1

经过相当多的盲目试验和错误，终于想出了一个解决方案。 原来我的原始脚本试图将图层加载到 map on-load 。 但是，tile 基础加载是通过 style 和 tile 文件pre-load配置的。

因此，需要将js addSource添加到map post-load 中，然后style on-load 。

this.map.on('style.load', function () {
    this.pastInitialLoad = true;
    this.map.addSource("geojsonfile", {
        "type": "geojson",
        "data": url }
    );

如果其他人被卡住了，这些指南/资源会很有帮助！

https://schwanksta.com/blog/vector-tiles-introduction-pt1

http://fuzzytolerance.info/blog/2016/03/16/Leaflet-to-Mapbox-GL/

https://github.com/mapbox/mapbox-gl-js/issues/2268