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

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

我正在按照 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}
      >

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

解决方法

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