Как найти все слои Mapbox в DeckGL?

Я использую этот пример, в котором метки Mapbox размещаются поверх слоя. Кажется, это написано с использованием простого пакета Mapbox. Я надеюсь сделать то же самое для компонента карты в DeckGL.

Соответствующий код из примера:

  const map = new mapboxgl.Map({
      container: document.body,
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-122.4, 37.79],
      zoom: 15,
      pitch: 60
    });

    map.on('load', () => {
      const firstLabelLayerId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;

Мой код с использованием DeckGL:

      <DeckGL
        initialViewState={INITIAL_VIEW_STATE}
        layers={layers}
        onClick={expandTooltip}
        onViewStateChange={hideTooltip}
        onWebGLInitialized={onInitialized}
        views={MAP_VIEW}
        controller={{
          touchRotate: true,
          inertia: 600,
        }}
      >
        <StaticMap
          reuseMaps
          mapStyle={MAP_STYLE}
          preventStyleDiffing={true}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        />
      </DeckGL>

Как я могу получить доступ к getStyle().layers в вышеуказанных компонентах? Я попытался использовать useRef, как в этом упрощенном компоненте:

const mapRef = useRef();
<DeckGL
        {...viewport}
        maxZoom={20}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        ref={mapRef}
      >

но обнаружил, что он не содержит информации о компоненте.


reactjs mapbox mapbox-gl-js use-ref deck.gl
person mmz    schedule 28.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно будет подождать до mapLoads, что-то вроде:

1 - Определите новый ref:

const mapRef = useRef();

2 - Дождитесь загрузки карты:

<StaticMap
  ref={mapRef}
  onLoad={onMapLoad}
  ...otherProps
/>

3 - Используйте метод getMap. Теперь мы уверены, что экземпляр Mapbox существует:

const onMapLoad = useCallback(() => {
  const map = mapRef.current.getMap();
  const mapboxLayers = map.getStyle().layers;
  console.log(mapboxLayers);
}, []);
person AdriSolid    schedule 28.02.2021
comment
сработало отлично спасибо! - person mmz; 01.03.2021