我可以使用 React.js MapBox GL JS 获取在 MapBox Studio 中创建的 MapBox 图层吗？

Question

我在 MapBox Studio 中设置了多个图层，并使用 MapBox GL JS 访问此地图。我想知道是否可以使用 React.js 访问这些层，而不仅仅是我使用 React.js?

动态创建的层

我试过 map.getStyle().layers 但这没有用，因为它 returns 未定义。

Answer 1

你绝对可以！为此，您需要使用地图对象上可用的 getLayer() 方法（在此处查看文档 ).

我在下面包含了一个使用 Mapbox 的 React 应用程序的片段。创建地图后，设置加载事件侦听器，然后在回调中调用 getLayer() 方法。

getLayer 方法需要一个图层 ID 参数，您可以从 Mapbox Studio 中获取该参数。图层 ID 只是 Mapbox Studio 侧边栏中显示的图层标签。在下面的示例中，“utah-avalanche-paths”是我在 Mapbox Studio 地图样式中为图层命名的名称。

希望对您有所帮助！我正在撰写 Mapbox 和 React Deep Dives 博客 post 系列。我最近在 A Complete Guide to Sources and Layers in React and Mapbox GL JS 上发表的一篇 post 也可能对你有帮助。

// create the map and configure it
// check out the API reference for more options
// https://docs.mapbox.com/mapbox-gl-js/api/map/
const map = new mapboxgl.Map({
  container: mapContainer.current,
  // custom Mapbox Studio map style url
  style: "mapbox://styles/lcdesigns/ckkuethsm0tzs17s4ibit7nag",
  center: [-111.75, 40.581],
  zoom: 12,
});

// only want to work with the map after it has fully loaded
// if you try to add sources and layers before the map has loaded
// things will not work properly
map.on("load", () => {
  // grab the map layer you want
  // 'utah-avalanche-paths' refer to the layer name in Mapbox Studio
  const layer = map.getLayer("utah-avalanche-paths");
});