在@react-native-mapbox-gl/maps中实现多边形外部区域置灰的问题

Hey there! The problem with your current code is that it only renders the target polygon you defined, but doesn't handle the area outside of it to create that grayed-out effect. To fix this, we need to use a reverse polygon (a polygon with a hole)—essentially, we'll draw a full-world polygon and cut out your target area from it, then style the remaining space as gray.

Step-by-Step Breakdown #

1. Create a full-world boundary: This polygon covers the entire map (from -180° to 180° longitude, -90° to 90° latitude) to act as the base for our grayed area.
2. Turn your target polygon into a hole: Mapbox Polygons support internal holes—just ensure the hole's coordinate order is opposite to the outer ring (follow the right-hand rule for consistency: outer rings clockwise, inner holes counter-clockwise, or vice versa).
3. Layer stacking: Add the grayed-out background layer first, then place your original highlighted polygon on top so it stands out.

Modified Working Code #

import MapboxGL from '@react-map-gl/mapbox-gl';

// Your target polygon coordinates (unchanged)
const targetPolygonCoords = [
  [-64.13955742852858, -37.12282253796483],
  [-64.1177564338672, -37.12241191755813],
  [-64.11689812699333, -37.14376122487725],
  [-64.12805611638079, -37.14430856379878],
  [-64.12736947088707, -37.13404529984051],
  [-64.13835579890784, -37.13281361461875]
];

// Full-world polygon to cover the entire map
const fullWorldPolygon = [
  [-180, -90],
  [180, -90],
  [180, 90],
  [-180, 90],
  [-180, -90] // Close the outer ring
];

function MapWithGrayedOutArea() {
  return (
    <MapboxGL.Map
      style={{ width: '100%', height: '100vh' }}
      accessToken="YOUR_MAPBOX_ACCESS_TOKEN"
      initialViewState={{
        longitude: -64.128,
        latitude: -37.133,
        zoom: 12
      }}
    >
      {/* Layer for grayed-out external area */}
      <MapboxGL.ShapeSource
        id="reversePolygonSource"
        shape={{
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            // First array: outer ring (full world), second array: inner hole (your target polygon)
            coordinates: [fullWorldPolygon, targetPolygonCoords]
          }
        }}
      >
        <MapboxGL.FillLayer
          id="grayOutArea"
          style={{
            fillColor: '#cccccc', // Customize your gray color here
            fillOpacity: 0.7 // Adjust opacity for subtlety/intensity
          }}
        />
      </MapboxGL.ShapeSource>

      {/* Your original highlighted polygon layer (unchanged, now sits on top of gray) */}
      <MapboxGL.ShapeSource
        id="polygonSource"
        maxZoomLevel={12}
        shape={{
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [targetPolygonCoords]
          }
        }}
      >
        <MapboxGL.FillLayer
          id="polygon"
          style={{
            fillOpacity: 0.5,
            fillColor: '#bbff33',
            fillOutlineColor: 'red'
          }}
        />
      </MapboxGL.ShapeSource>
    </MapboxGL.Map>
  );
}

export default MapWithGrayedOutArea;

Quick Tips #

• Layer Order: Always add the gray background layer first—this ensures your target polygon renders on top of it.
• Coordinate Troubleshooting: If the hole doesn't cut out correctly, reverse the order of your target polygon coordinates (swap clockwise/counter-clockwise).
• Visual Tweaks: Adjust fillColor and fillOpacity values to match your desired gray tone and transparency.

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