Javascript Mapbox GL JS无法从路径加载GeoJson

我正在用RubyonRails编写这个应用程序，我将应用程序设置为从特定路径提供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上签出

---

我在这里做错了什么？

好的，所以我实际上想做的是创建一个层，并将远程GeoJson文件指定为源：

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

---

我找到了这个过程的一个例子

“添加源不会立即使数据显示在地图上，因为源不包含样式细节”。您正在创建使用此源的层吗？我没有创建使用此源的层。我想我没有意识到这是必要的。