mapbox - react-map-gl 使用多个来源使其中一个不可见

Question

我在尝试加载两个不同颜色的不同 s 时指定了两个<Source>元素。当两个 s 都存在时它不起作用，因为它隐藏第一个 (id: ) 并显示后者 (id: )。ReactMapGLFeatureCollectionSourcemaps-with-yieldmaps-without-yield

以下警告也为第一个打印Source。

TypeError: Cannot read property 'fill-color' of undefined

我们不允许使用多个来源还是我在这里做错了什么？

<MapGL
  {...viewport}
  mapboxApiAccessToken={accessToken}
  onViewportChange={viewport => setViewport(viewport)}
  onHover={onHover}
  onClick={onClick}
  onLoad={onLoad}
  width="100%"
  height="100%"
  scrollZoom={false}
  dragRotate={false}
  touchRotate={false}
  keyboard={false}
>
  {map && map.features.length > 0 ? (
    <Source id="maps-with-yield" type="geojson" data={map}>
      <Layer
        id="data"
        type="fill"
        paint={{
          'fill-color': {
            property: 'yield',
            stops: [
              [minYield, worstYieldColor],
              [maxYield, bestYieldColor]
            ]
          },
          'fill-outline-color': '#fff'
        }}
      />
    </Source>
  ) : null}
  {mapWithoutYield && mapWithoutYield.features.length > 0 ? (
    <Source id="maps-without-yield" type="geojson" data={mapWithoutYield}>
      <Layer
        id="data"
        type="fill"
        paint={{
          'fill-color': '#66AEEC',
          'fill-outline-color': '#fff'
        }}
      />
    </Source>
  ) : null}
</MapGL>

注意：属性yield始终可用，因为我已经打印了数据集map和mapWithoutYield数据集并进行了检查。