当我通过 d3.json 加载时,geojson 层不显示

geojson layer does not display when I load through d3.json

当我通过 d3.json 加载 geojson 作为数据对象时,geojson 图层不显示。但是,如果我将 geojson 引用为 URL,那么它会正确显示。

我正在使用 deck.gl:6.3.2,mapbox-gl:v0.52.0。我正在使用香草 javascript。 当我运行这段代码时,它不显示。我检查了 'geomdata'。没问题。

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]
        })
      ]
    });
  });

有hints/ideas吗? 谢谢

看来您必须将一个对象传递到您的 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]
    })