React-map-gl 使用多个源使其中之一不可见

Question

我在尝试加载两个具有不同颜色的不同元素时指定了两个<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数据集并进行了检查。

Answer 1

根据我的经验，react-map-gl 确实允许多个源。这里的问题可能是分配给不同层的 ID。

即使来自不同的数据源，您仍然应该id为每个单独的图层分配唯一的值，以便 Mapbox 识别它们并使其更易于将来的开发（例如，设置活动图层）。

Same id( ) 将导致您的第二层覆盖第一层，这就是无法读取您的层的属性"data"的原因。fill-colormaps-with-yield