如何在Mapbox中实现图层显示/隐藏并获取自有矢量瓦片集的Mapbox URL

Hey there! Let's tackle your two questions step by step—first getting that layer toggle functionality working, then tracking down your custom tileset's mapbox:// URL.

一、实现图层显示/隐藏功能（基于官方示例适配） #

The official toggle layers example uses a pre-made tileset, but adapting it to your own data is straightforward. Here's how to do it:

1. Load your custom tileset source after the map finishes loading
2. Add a layer to render your tileset data
3. Add a toggle control (like a button) to switch the layer's visibility

Here's a complete code snippet tailored for your use case:

map.on('load', () => {
  // 1. 添加你的自有矢量瓦片源
  map.addSource('custom-tileset-source', {
    type: 'vector',
    url: 'mapbox://your-username.your-tileset-id' // 替换成你自己的瓦片集URL
  });

  // 2. 添加图层到地图（注意替换source-layer为你瓦片集中的图层名称）
  map.addLayer({
    id: 'custom-data-layer',
    type: 'circle', // 可根据数据类型改为fill/line/symbol等
    source: 'custom-tileset-source',
    'source-layer': 'your-source-layer-name', // 瓦片集内的图层名，需在Mapbox Studio确认
    paint: {
      'circle-color': '#2196F3',
      'circle-radius': 6
    }
  });

  // 3. 绑定切换按钮事件（假设页面上有个id为toggle-btn的按钮）
  document.getElementById('toggle-btn').addEventListener('click', () => {
    // 获取当前图层可见状态
    const currentVisibility = map.getLayoutProperty('custom-data-layer', 'visibility');
    
    // 切换可见性：visible ↔ none
    map.setLayoutProperty(
      'custom-data-layer', 
      'visibility', 
      currentVisibility === 'visible' ? 'none' : 'visible'
    );
  });
});

Key Notes: #

• Replace your-source-layer-name: This is the name of the layer inside your tileset—you can find it in Mapbox Studio when you open your tileset.
• The toggle logic relies on getLayoutProperty and setLayoutProperty to modify the layer's visibility property, which is the standard way to show/hide layers in Mapbox GL JS.

二、获取自有瓦片集的mapbox://格式URL #

Getting that URL is super easy—just follow these steps in your Mapbox account:

• Log into your Mapbox account and go to the Tilesets section
• Find the tileset you uploaded, then click into its detail page
• Look for the "Tileset URL" field (usually in the Overview tab at the top) — it'll look like mapbox://your-mapbox-username.tileset-unique-id
• You can also copy this URL directly from the tileset list view by hovering over the tileset and clicking the copy icon, or from Mapbox Studio when you add the tileset as a source to a style.

That's all! Once you plug that URL into your addSource call, you're ready to go with your custom data.

内容的提问来源于stack exchange，提问作者Charlie