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