Mapbox实现国家边界鼠标悬停变色效果问题求助

Hey there! I totally get the confusion when adapting the state hover tutorial to country boundaries—those small differences in source/layer IDs can trip you up. Let's break down what's going wrong and fix it step by step.

The Core Issue #

The US states tutorial uses a custom GeoJSON source that you add manually, but Mapbox Countries v1 is already included as part of Mapbox's built-in composite source (the default source for most Mapbox maps). You don't need to add a new source—you just need to reference the existing country layer correctly.

When you added Mapbox Countries v1 via Mapbox Studio, you're enabling the admin-0-countries layer within the composite source, not creating a separate source named country_boundaries or similar. That's why your code was throwing "source not found" errors.

Modified Working Code #

Here's the adjusted code to get country hover effects working:

var hoveredCountryId = null;

map.on('load', function () {
  // Create a fill layer for countries (using the built-in composite source)
  map.addLayer({
    'id': 'country-fills',
    'type': 'fill',
    'source': 'composite',
    'source-layer': 'admin-0-countries', // This is the layer ID for Mapbox Countries v1
    'paint': {
      'fill-color': '#627BC1',
      'fill-opacity': [
        'case',
        ['boolean', ['feature-state', 'hover'], false],
        1,
        0.5
      ]
    }
  });

  // Create a border layer for countries
  map.addLayer({
    'id': 'country-borders',
    'type': 'line',
    'source': 'composite',
    'source-layer': 'admin-0-countries',
    'paint': {
      'line-color': '#627BC1',
      'line-width': 2
    }
  });

  // Handle mouse enter event
  map.on('mouseenter', 'country-fills', function (e) {
    if (e.features.length > 0) {
      if (hoveredCountryId !== null) {
        map.setFeatureState(
          { source: 'composite', sourceLayer: 'admin-0-countries', id: hoveredCountryId },
          { hover: false }
        );
      }
      hoveredCountryId = e.features[0].id;
      map.setFeatureState(
        { source: 'composite', sourceLayer: 'admin-0-countries', id: hoveredCountryId },
        { hover: true }
      );
    }
  });

  // Handle mouse leave event
  map.on('mouseleave', 'country-fills', function () {
    if (hoveredCountryId !== null) {
      map.setFeatureState(
        { source: 'composite', sourceLayer: 'admin-0-countries', id: hoveredCountryId },
        { hover: false }
      );
    }
    hoveredCountryId = null;
  });
});

Key Changes Explained #

• Removed the custom addSource call: We're using Mapbox's built-in composite source instead of adding a separate GeoJSON source.
• Added source-layer: admin-0-countries: This tells Mapbox to use the country boundaries layer from the composite source.
• Updated hover event handlers: We now target the country-fills layer and reference the correct source/source-layer when setting feature states.
• Renamed hoveredStateId to hoveredCountryId: Just a clarity tweak to match the use case.

Quick Checks to Ensure It Works #

• Make sure your map style (from Mapbox Studio) has Mapbox Countries v1 enabled. You can verify this by checking the "Layers" tab in Studio—look for the admin-0-countries layer.
• Ensure your map is initialized with the correct style URL from Studio (the one that includes Mapbox Countries).

That should get your country hover effect up and running smoothly!

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