response-map-gl с использованием нескольких источников делает один из них невидимым - PullRequest
Новая
       20

response-map-gl с использованием нескольких источников делает один из них невидимым

0 голосов
/ 09 апреля 2020

Я указал два <Source> элемента в ReactMapGL, пытаясь загрузить два разных FeatureCollection с разной окраской. Он не работает, когда присутствуют оба Source s, поскольку скрывает первое (id: maps-with-yield) и показывает последнее (id: maps-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 и проверил.

...