Great question! I've run into this exact issue with Mapbox GL JS before—here's what's going on and how to fix it:

Why Your Custom Layers Disappear #

When you call map.setStyle(), it completely replaces the map's entire style object. That includes all existing layers, sources, and style settings—so any custom layers you added on top of the base style get wiped out, since they aren't part of the new style you're switching to.

Solution 1: Update Only the Base Map Layers (No Full Style Replace) #

If you want to keep your custom layers intact and only swap out the underlying base map, this is the cleaner approach. Instead of replacing the entire style, you'll:

1. Identify which layers in your current style are part of the base map (Mapbox's built-in layers usually have IDs starting with mapbox-, like mapbox-road or mapbox-terrain—you can verify this by checking your style in Mapbox Studio).
2. Fetch the new base style's JSON.
3. Remove the old base map layers from your map.
4. Add the new base map layers, making sure to place them below your custom layers to avoid covering them.

Example Code #

// Function to swap base map layers while keeping custom layers
async function swapBaseMap(newStyleUrl) {
  // Fetch the new base style JSON
  const response = await fetch(newStyleUrl);
  const newStyle = await response.json();

  // Step 1: Remove existing base map layers (adjust the ID filter as needed)
  map.getStyle().layers.forEach(layer => {
    if (layer.id.startsWith('mapbox-')) {
      map.removeLayer(layer.id);
      // Also remove the source if it's part of the base map (optional, if sources are unique to base)
      if (layer.source.startsWith('mapbox-')) {
        map.removeSource(layer.source);
      }
    }
  });

  // Step 2: Add new base map layers, placing them below your first custom layer
  // Replace 'your-first-custom-layer-id' with the ID of your topmost custom layer
  newStyle.layers.forEach(layer => {
    if (layer.id.startsWith('mapbox-')) {
      map.addLayer(layer, 'your-first-custom-layer-id');
    }
  });

  // Optional: Update other style settings like light or sky from the new style
  if (newStyle.light) map.setLight(newStyle.light);
  if (newStyle.sky) map.setSky(newStyle.sky);
}

// Usage: Call this function when you want to switch base maps
swapBaseMap('mapbox://styles/mapbox/dark-v11');

Solution 2: Re-add Custom Layers After setStyle() #

If you need to use map.setStyle() (for example, if the new style has major structural changes), you can simply re-add your custom layers once the new style finishes loading. The key is to wrap your layer-adding logic in a callback to ensure it runs after the style is fully loaded.

Example Code #

// First, define a reusable function to add your custom layers
function addCustomLayers(map) {
  // Add your custom source (if using a custom source like GeoJSON)
  map.addSource('custom-data', {
    type: 'geojson',
    data: 'path/to/your/data.geojson'
  });

  // Add your custom layer(s)
  map.addLayer({
    id: 'custom-markers',
    type: 'circle',
    source: 'custom-data',
    paint: {
      'circle-radius': 8,
      'circle-color': '#ff0000'
    }
  });

  // Add any other custom layers here...
}

// When switching styles:
map.setStyle('mapbox://styles/mapbox/light-v11', { diff: false }, () => {
  // Callback runs after the new style is fully loaded
  addCustomLayers(map);
});

Pro Tips #

• Save your custom layer configurations in an array (e.g., const customLayers = [...]) so you can loop through them instead of writing duplicate code when re-adding.
• If your custom layers use sources from the original base style, double-check that the new style includes those sources—if not, you'll need to re-add those sources too.
• Use map.getLayer('your-custom-layer-id') to check if a layer already exists before adding it, to avoid errors if you accidentally call the add function multiple times.

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