Слой geojson не отображается при загрузке через d3.json

Question

Слой geojson не отображается, когда я загружаю geojson через d3.json в качестве объекта данных. Однако, если я ссылаюсь на геойсон как на URL, он отображается правильно.

Я использую deck.gl: 6.3.2, mapbox-gl: v0.52.0. Я использую ванильный JavaScript. Когда я запускаю этот код, он не отображается. Я проверил "геомданные". Это хорошо.

d3.json("roads.json", function(geomdata) { 
    deckgl = new deck.DeckGL({
      container,
      map: mapboxgl,
      mapboxApiAccessToken:
        "<myMapBoxKey>,
      mapStyle: "mapbox://styles/mapbox/light-v9",
      longitude: -98.58,
      latitude: 39.82,
      zoom: 4,
      layers: [
        new deck.GeoJsonLayer({
          geomdata,
          stroked: true,
          filled: true,
          lineWidthMinPixels: 2,
          opacity: 0.4,
          getLineColor: [255, 100, 100],
          getFillColor: [200, 160, 0, 180]
        })
      ]
    });
  });

Тем не менее, когда я запускаю это, где geojson является URL, он отображается просто отлично.

d3.json("roads.json", function(geomdata) {      
var US_MAP_GEOJSON =
  "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/highway/roads.json";

    deckgl = new deck.DeckGL({
      container,
      map: mapboxgl,
      mapboxApiAccessToken:
        "<myMapBoxAccessKey>",
      mapStyle: "mapbox://styles/mapbox/light-v9",
      longitude: -98.58,
      latitude: 39.82,
      zoom: 4,
      layers: [
        new deck.GeoJsonLayer({
          data: US_MAP_GEOJSON ,
          stroked: true,
          filled: true,
          lineWidthMinPixels: 2,
          opacity: 0.4,
          getLineColor: [255, 100, 100],
          getFillColor: [200, 160, 0, 180]
        })
      ]
    });
  });

Есть намеки / идеи? Спасибо

Answer 1

Похоже, вы должны передать объект в GeoJsonLayer, Но ваше первое поле не key: value комбо, это просто value, Попробуйте настроить ваши данные следующим образом data: geomdata,

    new deck.GeoJsonLayer({
      data: geomdata,
      stroked: true,
      filled: true,
      lineWidthMinPixels: 2,
      opacity: 0.4,
      getLineColor: [255, 100, 100],
      getFillColor: [200, 160, 0, 180]
    })