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

【问题标题】：How to find all Mapbox layers in DeckGL?如何在 DeckGL 中找到所有 Mapbox 图层？
【发布时间】：2021-02-28 14:35:57
【问题描述】：

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

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

【问题讨论】：

标签： reactjs mapbox mapbox-gl-js deck.gl use-ref

【解决方案1】：

你需要等到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);
}, []);

【讨论】：

【解决方案2】：

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

Map.on('load', callback function)

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

【讨论】：