Mapbox-gl 托管 S3 - 添加源

Question

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

我现在的问题是，如何使用类似以下内容将 geojson 点层添加到地图（托管在一个简单的 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 to convert the json file into protobuf vector tiles and instead adding the layer direct to the map from the javascript file. The above js for addsource and addlayer come from this Mapbox guide 的无服务器矢量环境中。

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

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

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

Answer 1

经过大量的盲目尝试和错误，终于找到了解决办法。原来我的原始脚本试图将图层加载到地图 on-load。但是，瓷砖基本负载是通过样式和瓷砖文件配置的 pre-load.

因此需要在map中添加jsaddSourcepost-load然后添加style正在加载.

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

Mapbox-gl 托管 S3 - 添加源

Mapbox-gl Hosted S3 - addsource

javascript

amazon-s3

amazon-web-services

mapbox

mapbox-gl