Mapbox GL JS無法從路徑加載GeoJson

Question

我正在用Ruby on Rails編寫應用程序，並且已將應用程序設置為從特定路徑提供GeoJson。 我想讓Mapbox從指定路徑中獲取GeoJson，然后將其添加到地圖中。 這是我的JavaScript代碼來創建地圖

$(document).on 'turbolinks:load', ->
  map = new (mapboxgl.Map)(
    container: 'map'
    style: 'mapbox://styles/mapbox/streets-v9'
    zoom: 6
  )
  map.on 'load', ->
    map.addSource 'shapes',
      type: 'geojson'
      data: '/regions.json'

當我導航到/regions.json ，得到以下響應。

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
            "coordinates": [
                [
                    [8.66990129597281, 50.1242808292475],
                    [8.6629978834745, 50.1232734203388],
                    [8.66073109130571, 50.1231247844397],
                    [8.65846429911693, 50.1231743297949],
                    [8.65887644316587, 50.1218035561855],
                    [8.65993256224607, 50.1193096384939],
                    [8.65980376723581, 50.1190949242805],
                    [8.66297212445633, 50.1181699904754],
                    [8.66451766457959, 50.1175093125293],
                    [8.6669905287728, 50.1165843480906],
                    [8.66910276691314, 50.1158080248614],
                    [8.67085437906084, 50.1154611529673],
                    [8.67098317407113, 50.1174597613236],
                    [8.67077710204663, 50.1200363564073],
                    [8.67015888599337, 50.1224806902187],
                    [8.66979825998064, 50.1237358401687],
                    [8.66990129597281, 50.1242808292475]
                ]
            ],
            "type": "Polygon"
        }
    }, {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "coordinates": [
                [
                    [8.69901780003497, 50.1216735191773],
                    [8.69820854586041, 50.1210834384206],
                    [8.69762143988481, 50.1207476995652],
                    [8.69625681516334, 50.1199134291953],
                    [8.6948921904667, 50.1181736234834],
                    [8.69597119603273, 50.1173698322427],
                    [8.69612987332479, 50.1173291335912],
                    [8.69676458249296, 50.1181736234834],
                    [8.69744689485361, 50.1188553092786],
                    [8.69879565183601, 50.1200558666313],
                    [8.70008093788664, 50.121042742926],
                    [8.69901780003497, 50.1216735191773]
                ]
            ],
            "type": "Polygon"
        }
    }, {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "coordinates": [
                [
                    [8.67778012178596, 50.105440710563],
                    [8.67960973428302, 50.103294069223],
                    [8.67505801538456, 50.1017054926895],
                    [8.67414320915341, 50.1013763215998],
                    [8.66892211982668, 50.0993583102266],
                    [8.66816350002185, 50.1000882390455],
                    [8.6691229309412, 50.1009755885121],
                    [8.67238053367137, 50.1029076635563],
                    [8.67427708321821, 50.1039953159691],
                    [8.67778012178596, 50.105440710563]
                ]
            ],
            "type": "Polygon"
        }
    }]
}

地圖加載得很好，但是沒有形狀。 令人沮喪的是，瀏覽器中沒有錯誤，並且GeoJson在geojson.io上簽出了。

我在這里做錯了什么？

Answer 1

好的，事實證明，我真正想要做的是創建一個圖層並將遠程GeoJson文件分配為源：

map.addLayer
  id: 'territory-map'
  type: 'fill'
  source:
    type: 'geojson'
    data: '/regions.json'

我能找到這個過程的一個例子在這里