如何在 DeckGL 中找到所有 Mapbox 图层？

Question

我正在关注 this 将 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}
      >

但发现它不包含有关该组件的信息。

Answer 1

您需要等到 mapLoad 秒，例如：

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

Answer 2

地图加载到浏览器后，您必须使用 deckgl 图层。为此，您可以使用：

Map.on('load', callback function)

更多参考使用这个https://youtu.be/x6UcMcAWNMo

如何在 DeckGL 中找到所有 Mapbox 图层？

How to find all Mapbox layers in DeckGL?

mapbox

reactjs

mapbox-gl-js

deck.gl

use-ref